vuex npm install vuex --save
在 src
目录下新建文件夹 store
,再在新建文件夹下新建 index.js
文件,这个文件我们用来写一些模块并导出 store 的文件,代码示例:
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) export default new Vuex.Store({ state:{ loginStatus: 0, //登录状态 0未登录 1已登陆 //token:‘‘, //userId:‘‘, //homeRole:‘‘, //row:‘‘ }, mutations:{ changeToken(state,token){ state.token = token // console.log(state.token,9999) }, userId(state,userId){ state.userId = userId; // console.log(state.userId,9999) }, homeRole(state,homeRole){ state.homeRole = homeRole; // console.log(state.homeRole,9999) }, articleEditData(state,row){ state.articleEditData = row; // console.log(‘state.articleEditData‘,state.articleEditData) } }, actions:{ } })
在main.js文件中使用(我把此部分代码写到了router/index.js文件里):
import store from ‘../store/index‘ //... router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 var mytoken = store.state.token; var localStorage =window.localStorage.getItem(‘token‘); if(!mytoken && !localStorage){ next({ path: ‘/login‘, query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由 }) }else{ next(); } }else { next(); } }); //... export default router;
在 vue 组件中使用():
// 存储token var msn = res.data.message; vm.$store.commit(‘changeToken‘,msn) //存储token vm.$store.commit(‘userId‘,userId) //存储userId window.localStorage.setItem(‘token‘, msn) //将token存到本地 window.localStorage.setItem(‘userId‘, userId) //将用户的userId存到本地
原文:https://www.cnblogs.com/meiyanstar/p/13565122.html