从无到有构建vue实战项目(七)
十四、Vuex的使用
Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。简单点理解,就是凡是将数据用状态管理模式来存储,在用到该数据的地方,只要一处地方发生变化,另一处也会发生变化,这样就解决了vue中非父子组件传值的问题,当然了,Vuex的作用不止如此,还有许多新的功能,诸如配合路由守卫做登陆拦截,配合localStorage进行本地数据的存储与管理等等。
Vuex的安装
//npm的安装方式
npm install vuex --save
Vuex的简单实用
利用Vuex和localStorage进行用户状态管理,防止刷新浏览器后用户状态丢失,实现如下:
//发送请求
this.axios
.post(
"url",
JSON.stringify(this.userInfo)
)
.then(res => {
console.log(res.data);
if (res.status == 200 && res.data.verify == true) {
const userName = res.data.uphone;
const token = res.data.token;
this.$router.push({ path: "/" });
//将token通过commit提交到Vuex
this.$store.commit("getToken", token);
// 将登录名使用vuex传递到Home页面
this.$store.commit("userName", userName);
} else {
this.$notify({
title: "提示信息",
message: "账号或密码错误",
type: "error"
});
}
})
.catch(err => {
console.log(err);
});
通过Vuex和localStorage存储用户信息以保持用户状态
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const mutations = { userName: (state, user_name) => { state.user_name = user_name // 把登录的用户的名保存到localStorage中,防止页面刷新,导致vuex重新启动,用户名就成为初始值的情况 localStorage.setItem('user_name', user_name) }, getToken(state, token) { state.token = token; localStorage.setItem('token', token) }, } const state = { user_name: localStorage.getItem('user_name'), token: localStorage.getItem('token'), } // getters 只会依赖 state 中的成员去更新 const getters = { userPhone: (state) => state.user_name, token: (state) => state.token, } const store = new Vuex.Store({ actions, mutations, state, getters }) export default store
至此,该功能已实现
十五、侧边导航栏的实现
有时候,我们在项目中有这样的需求,页面左侧是菜单栏,右边是每个菜单项所对应的内容区,点击不同的菜单项,内容区会显示不同的内容,这个怎样实现呢?我采取了子路由渲染的方法,如下:
假设我们有四个菜单项模块,那么它的路由配置是这样的:
{
path: '/inform',
name: inform,
component: (resolve) => require(['../components/presonal/inform.vue'], resolve),
meta: {
isLogin: true
},
children: [{
path: '/inform/course',
name: course,
component: (resolve) => require(['../components/presonal/slider/course.vue'], resolve)
}, {
path: '/inform/interactive',
name: interactive,
component: (resolve) => require(['../components/presonal/slider/interactive.vue'], resolve)
},
{
path: '/inform/system',
name: system,
component: (resolve) => require(['../components/presonal/slider/system.vue'], resolve)
},
{
path: '/inform/privateLetter',
name: privateLetter,
component: (resolve) => require(['../components/presonal/slider/privateLetter.vue'], resolve)
}
]
},
然后我们在它的父级路由所对应的页面加上
<router-view></router-view>
即可实现该功能
至此,该功能已实现
从无到有构建vue实战项目(七)的更多相关文章
- 从无到有构建vue实战项目(四)
六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...
- 从无到有构建vue实战项目(一)
vue的安装 首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装 输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 ...
- 从无到有构建vue实战项目(二)
二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...
- 从无到有构建vue实战项目(三)
四.响应式布局的实现 elemnt-ui参考bootatrap提供了响应式布局,附上地址:https://element.eleme.cn/#/zh-CN/component/layout 以下是我的 ...
- 从无到有构建vue实战项目(五)
八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vu ...
- 从无到有构建vue实战项目(六)
十.徒手撸一个vue下拉左侧二级导航 先附上最终效果图: vue代码: <div class="dropdown-menu-explore" v-on:mouseover=& ...
- 从无到有构建vue实战项目(八)
十六.vue-lazyload的使用 首先,我们需要下载vue-lazyload包: npm i vue-lazyload -S 下载好之后,我们将它引入到自己的项目: //main.js //引入图 ...
- Vue 实战项目: 硅谷外卖(1)
第 1 章: 准备 1.1. 项目描述 1) 此项目为外卖 WebApp(SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新 ...
- Vue 实战项目开发流程
一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...
随机推荐
- spring配置文件比较全的约束
个人总结:Spring的配置文件applicationContext.xml约束文件.全面约束 <?xml version="1.0" encoding="utf- ...
- 如何启用linux的路由转发功能
如何使用iptables的NAT功能把红帽企业版Linux作为一台路由器使用? 方法: 提示: 以下方法只适用于红帽企业版Linux 3 以上. 1.打开包转发功能: echo "1&quo ...
- Python基础总结之第三天开始重新认识‘字符串’(新手可相互督促)
年薪20万的梦想,又进了一步... 戏好多 ’字符串‘开始啦~ 字符串的定义:字符串可以用英文单引号或双引号又或者三引号包围起来. 为毛有单引号,还要有双引号和三引号??? 看案例吧: 字符串的其他使 ...
- kubernetes二进制高可用部署实战
环境: 192.168.30.20 VIP(虚拟) 192.168.30.21 master1 192.168.30.22 master2 192.168.30.23 node1 192.168.30 ...
- spring源码分析之配置文件名占位符的解析(一)
一.直接写个测试例子 package com.test; import org.junit.Test; import org.springframework.context.ApplicationCo ...
- Javaweb入门 数据库第一天
数据库概述 本菜鸟使用的数据库软件为Mariadb,以下内容都是以Mariadb数据库软件来写的学习总结. 数据库 所谓的数据库就是用于存储.管理数据的仓库,数据库根据底层存储数据结构的不同可以分为很 ...
- javaweb入门---web服务器与HTTP协议基础
上文web基础简介了web到底是什么,以及身为Java开发人员需要掌握的地方.本文将解答web服务器是什么,怎么使用?还有关于http协议的基础知识. web服务器 web服务器的大概念很广泛,但是通 ...
- JS-数组的定义
- Restful API 中的错误处理
简介 随着移动开发和前端开发的崛起,越来越多的 Web 后端应用都倾向于实现 Restful API. Restful API 是一个简单易用的前后端分离方案,它只需要对客户端请求进行处理,然后返回结 ...
- Keil uVision4 ——如何新建一个项目
一.打开Keil4软件,点击Project,再点击New μVision Projrct. 二.新建一个文件夹,并在里面输入这个项目的名字. 三.点击Intel,根据实际情况选择,这里选择的是80/8 ...