就像React的生態(tài)系統(tǒng)有redux一樣，vue的生態(tài)系統(tǒng)中的一員vuex也扮演著重要的角色。由于現(xiàn)在很多優(yōu)秀的博客都介紹了vuex的原理以及基本用法，因此本文不會(huì)在此贅述。而是依據(jù)筆者的項(xiàng)目，簡單介紹如何實(shí)現(xiàn)vuex模塊化。

Vuex 入門，這是筆者瀏覽的一篇不錯(cuò)的入門文章。

• 安裝

cnpm install vuex

• 模塊處理

在src目錄下新增store文件夾，然后新增modules文件夾，存放每個(gè)模塊的狀態(tài)管理文件，然后新增action.js，getters.js，index.js，mutation.js，types.js

每個(gè)js含義如下

• types.js 內(nèi)定義常量來表示事件類型
• user.js 內(nèi)寫該 user 組件內(nèi)用到的 state 、 getters 、 actions 和 mutations，并最后統(tǒng)一導(dǎo)出
• getters.js 內(nèi)寫原來的 getters ，用來獲取屬性
• actions.js 內(nèi)寫原來的 actions ，就是要執(zhí)行的動(dòng)作，如流程的判斷、異步請求
• index.js 是用來組裝 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。通過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
  }
})

其它js中暫未使用到，所以暫未列出

• 引入

在main.js中引入

import store from './store/index'

new Vue({
  el: '#app',
  router,
  i18n,
  store,
  components: { App },
  template: '<App/>'
})

• 使用

前面的準(zhǔn)備工作完成后，我們就可以在組件中使用了。

獲取狀態(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)，比如登陸后設(shè)置用戶的信息，登陸其它的代碼在此省略了：

 var userinfo = response.data.result;
 userinfo.isSignin = true;
 this.$store.dispatch("setUserInfo", userinfo);

• 總結(jié)

本文簡單介紹了如果在項(xiàng)目中模塊化管理狀態(tài)，統(tǒng)一配置管理不僅有助于我們的協(xié)同開發(fā)，也有利于提高代碼的可讀性。