Vue学习记录-状态管理
要解决的问题
平时的系统开发中,基本都会碰到这个权限问题,需要根据用户的登录状态进行处理。最常见的情况就是“先登录,后使用”。除去打包成APP,无法看到连接外,如果地址栏里直接输入地址就能绕过登录的话,那就忒不安全了。
方案1:自己做一个状态管理
具体的代码,我删掉了,所以这里只陈述一下过程
1. main.js里面,加一个var user = {didLogin:false},并在methods中添加一个方法changeUserAuth(isLogin){ user.didLogin = isLogin; };
2. main.js里面,添加路由beforeEach,通过判断user.didLogin,进行next()或者next({name:'login});
3. 子页面中如果要修改这个状态的话,通过方法进行修改,this.$root.changeUserAuth(true);
方案2:vuex
正规军的做法,就是vuex了,通过他统一对全局变量进行管理。说一下具体的用法
1. 安装
npm i vuex --save
2. 创建store.js(/ProjectPaht/src/vuex/store.js),并定义types(/ProjectPaht/src/vuex/types.js)
/* store.js */
import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' //用户 Vue.use(Vuex) export default new Vuex.Store({ modules: { user, } })
/* types.js */
// 用户权限 export const USER_INFO_UPDATE = 'USER_INFO_UPDATE';
3. 定义各个模块的数据(user.js)
import * as types from '../types' const USER_INFO = 'userInfo'; const state = { // 用户登录信息 userInfo: JSON.parse(localStorage.getItem(USER_INFO) || '{}'), } const actions = { /** * 用户登录 */ userLogin({commit}, res) { localStorage.setItem(USER_INFO, JSON.stringify(res)); commit(types.USER_INFO_UPDATE, res); }, /** * 退出登录 */ userLogout({commit}) { localStorage.removeItem(USER_INFO); commit(types.USER_INFO_UPDATE, {}); }, } const getters = { userInfo: state => state.userInfo, didLogin: state => state.userInfo.userid.length > 0, } const mutations = { [types.USER_INFO_UPDATE](state, res) { state.userInfo = res }, } export default { state, actions, getters, mutations }
3. 更改store数据
<script> ... import {mapActions} from 'vuex'; export default { ... methods: { ...mapActions({ userLogin: 'userLogin', //vues/modules/user.js中定义的方法 userLogout: 'userLogout' }), // 登录 onPressLogin: function () { let param = { username: this.username, password: this.password, } api.POST('api/account/login', param).then(data=> { let user = {userid:'wzf'}; //data.data; // 更新state this.userLogin(user); // 页面跳转 this.$router.push({name: 'home'}); }); } } } </script>
页面跳转以后,就会执行到main.js的路由beforeEach中去了
... import router from './router' import store from './vuex/store' import {mapState} from 'vuex' new Vue({ el: '#app', router, store, template: '<App/>', components: { App, }, computed: mapState({ userInfo: ({user}) => user.userInfo, //从user.js中获取信息用于判断是否登录 }), methods: { checkAuth: function () { let {userid = ''} = this.userInfo; return userid.length > 0; //这里做的比较简单,只是通过userid进行的判断 } } }) router.beforeEach((to, from, next) => { // 如果不是登录页面 if (to.name != 'login') {
if (!router.app.checkAuth()) { next({name: 'login'}); return; } } next(); });
最后理一下数据流向
1. 页面通过接口调用接口,完成账号验证;
2. 通过vuex修改store,这里具体起作用的是vuex/modules/user.js;
3. 进行页面跳转,会被router.beforeEach拦截,通过对store的判断,具体完成跳转(到登录、到下个页面)
因为之前用了Redux,所以vuex直接就用上了,没有任何难度。关于vuex的具体用法,还是参照一下官方文档吧 https://vuex.vuejs.org/