首先需要安裝vuex
cnpm install vuex
在src目錄下新增store文件夾庐杨，然后新增modules文件夾掺冠，存放每個(gè)模塊的狀態(tài)管理文件狮腿，然后新增action.js杨名，getters.js，index.js泽艘，mutation.js欲险，types.js
types.js：內(nèi)定義常量來(lái)表示事件類型
user.js：內(nèi)寫(xiě)該 user 組件內(nèi)用到的 state 、getters 匹涮、 actions 和 mutations天试，并最后統(tǒng)一導(dǎo)出
getters.js： 內(nèi)寫(xiě)原來(lái)的 getters ，用來(lái)獲取屬性
actions.js ：內(nèi)寫(xiě)原來(lái)的 actions 然低，就是要執(zhí)行的動(dòng)作喜每，如流程的判斷务唐、異步請(qǐng)求 。
index.js： 是用來(lái)組裝 actions.js 灼卢、 getters.js 绍哎、user.js 的来农，然后進(jìn)行統(tǒng)一的導(dǎo)出
以用戶信息模塊為例子,user.js內(nèi)容如下：
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。通過(guò)vuex的getters可以獲取定義的狀態(tài)state繁莹。如果要操作狀態(tài)檩互，則要觸發(fā)actions 提交mutations修改狀態(tài)。
type.js內(nèi)容如下：
const
SETUSERINFO = "SETUSERINFO";//設(shè)置登錄用戶信息
const CLEAR_USERINFO = "CLEAR_USERINFO";//清除用戶信息
export default {
? SETUSERINFO,
? CLEAR_USERINFO
}
index.js內(nèi)容如下咨演，module允許我們模塊化管理狀態(tài)：
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/>'
})
獲取狀態(tài)闸昨，比如要獲取用戶是否為管理員，是管理員才顯示管理菜單：
<el-col:span="4"v-show="$store.getters.isAdmin">
?? ?<el-menu-itemindex="/manage/case">{{ $t("menuName.caseManage") }}</el-menu-item>
</el-col>
修改狀態(tài)薄风，比如登陸后設(shè)置用戶的信息：
var userinfo = response.data.result;
userinfo.isSignin = true;
this.$store.dispatch("setUserInfo", userinfo);
