Vue学习记录-状态管理

发布时间：2020-12-16 23:19:32 所属栏目：百科来源：网络整理

导读：要解决的问题平时的系统开发中，基本都会碰到这个权限问题，需要根据用户的登录状态进行处理。最常见的情况就是“先登录，后使用”。除去打包成APP，无法看到连接外，如果地址栏里直接输入地址就能绕过登录的话，那就忒不安全了。方案1：自己做一个状态管

要解决的问题

平时的系统开发中，基本都会碰到这个权限问题，需要根据用户的登录状态进行处理。最常见的情况就是“先登录，后使用”。除去打包成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''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.userInfo = res
},}

export default {
state,actions,getters,mutations
}

3. 更改store数据

页面跳转以后，就会执行到main.js的路由beforeEach中去了

'./router''./vuex/store''vuex'

new Vue({
el: '#app',router,store,template: '',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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!