首先需要安装vuex
cnpm install vuex
在src目录下新增store文件夹，然后新增modules文件夹，存放每个模块的状态管理文件，然后新增action.js，getters.js，index.js，mutation.js，types.js
types.js：内定义常量来表示事件类型
user.js：内写该 user 组件内用到的 state 、getters 、 actions 和 mutations，并最后统一导出
getters.js： 内写原来的 getters ，用来获取属性
actions.js ：内写原来的 actions ，就是要执行的动作，如流程的判断、异步请求 。
index.js： 是用来组装 actions.js 、 getters.js 、user.js 的，然后进行统一的导出
以用户信息模块为例子,user.js内容如下：
import types from '@/store/types'
const state = {
userName: '' || localStorage.getItem("userName"),
userId: '' || localStorage.getItem("userId"),
isSignin: false || localStorage.getItem("isSignin"),
userRole: '' || localStorage.getItem("userRole"),
}
var getters = {
userName: (state) => state.userName,
userId: (state) => state.userId,
isSignin: (state) => state.isSignin,
userRole: (state) => state.userRole,
isAdmin(state) {
return typeof state.userRole != 'undefined' && state.userRole != null && state.userRole.indexOf("ROLE_ADMIN") >=0
},
isUser(state) {
return typeof state.userRole != 'undefined' && state.userRole != null && state.userRole.indexOf("ROLE_USER") >=0
}
}
const actions = {
setUserInfo(context,userinfo){
if(typeof userinfo != 'undefined' && typeof userinfo.userId != 'undefined'
&& typeof userinfo.userName != 'undefined' ){
context.commit(types.SETUSERINFO,userinfo);
}
},
clearUserInfo(context){
context.commit(types.CLEAR_USERINFO);
}
}
const mutations= {
[types.SETUSERINFO](state, userinfo){
state.userName = userinfo.userName;
state.userId = userinfo.userId;
state.isSignin = userinfo.isSignin;
state.userRole = userinfo.userAuthorities;
localStorage.setItem("userId", userinfo.userId);
localStorage.setItem("userName", userinfo.userName);
localStorage.setItem("isSignin", userinfo.isSignin);
localStorage.setItem("userRole", userinfo.userAuthorities);
},
[types.CLEAR_USERINFO](state){
state.userName = '';
state.userId = '';
state.isSignin = false;
state.userRole = '';
localStorage.setItem("userId","");
localStorage.setItem("userName","");
localStorage.setItem("isSignin", false);
localStorage.setItem("userRole", '');
}
}
export default {
state,
getters,
actions,
mutations
}
从user.js中，笔者定义了state，getters，actions，mutations。通过vuex的getters可以获取定义的状态state。如果要操作状态，则要触发actions 提交mutations修改状态。
type.js内容如下：
const
SETUSERINFO = "SETUSERINFO";//设置登录用户信息
const CLEAR_USERINFO = "CLEAR_USERINFO";//清除用户信息
export default {
SETUSERINFO,
CLEAR_USERINFO
}
index.js内容如下，module允许我们模块化管理状态：
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
import user from './modules/user'
export default new vuex.Store({
getters,
actions,
mutations,
modules: {
user
}
})
在main.js中引入
import store from './store/index'
new Vue({
el: '#app',
router,
i18n,
store,
components: { App },
template: '<App/>'
})
获取状态，比如要获取用户是否为管理员，是管理员才显示管理菜单：
<el-col:span="4"v-show="$store.getters.isAdmin">
<el-menu-itemindex="/manage/case">{{ $t("menuName.caseManage") }}</el-menu-item>
</el-col>
修改状态，比如登陆后设置用户的信息：
var userinfo = response.data.result;
userinfo.isSignin = true;
this.$store.dispatch("setUserInfo", userinfo);
