就像React的生態(tài)系統(tǒng)有redux一樣，vue的生態(tài)系統(tǒng)中的一員vuex也扮演著重要的角色震缭。由于現(xiàn)在很多優(yōu)秀的博客都介紹了vuex的原理以及基本用法赂毯，因此本文不會在此贅述。而是依據(jù)筆者的項目拣宰，簡單介紹如何實現(xiàn)vuex模塊化党涕。
Vuex 入門，這是筆者瀏覽的一篇不錯的入門文章徐裸。
-
安裝
cnpm install vuex
-
模塊處理
在src目錄下新增store文件夾遣鼓，然后新增modules文件夾，存放每個模塊的狀態(tài)管理文件重贺，然后新增action.js骑祟，getters.js，index.js气笙，mutation.js次企，types.js
每個js含義如下
- types.js 內(nèi)定義常量來表示事件類型
- user.js 內(nèi)寫該 user 組件內(nèi)用到的 state 、 getters 潜圃、 actions 和 mutations缸棵，并最后統(tǒng)一導出
- getters.js 內(nèi)寫原來的 getters ，用來獲取屬性
- actions.js 內(nèi)寫原來的 actions 谭期，就是要執(zhí)行的動作堵第，如流程的判斷、異步請求
- index.js 是用來組裝 actions.js 隧出、 getters.js 踏志、user.js 的，然后進行統(tǒng)一的導出
以用戶信息模塊為例子,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圆雁。通過vuex的getters可以獲取定義的狀態(tài)state忍级。如果要操作狀態(tài)，則要觸發(fā)actions 提交mutations修改狀態(tài)伪朽。
type.js內(nèi)容如下：
const SETUSERINFO = "SETUSERINFO";//設置登錄用戶信息
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
}
})
其它js中暫未使用到，所以暫未列出
-
引入
在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-item index="/manage/case">{{ $t("menuName.caseManage") }}</el-menu-item>
</el-col>
修改狀態(tài)宇挫，比如登陸后設置用戶的信息，登陸其它的代碼在此省略了：
var userinfo = response.data.result;
userinfo.isSignin = true;
this.$store.dispatch("setUserInfo", userinfo);
-
總結(jié)
本文簡單介紹了如果在項目中模塊化管理狀態(tài)酪术，統(tǒng)一配置管理不僅有助于我們的協(xié)同開發(fā)器瘪，也有利于提高代碼的可讀性。
