前言 上回我們說了一下 vuex 的簡單使用，最后面的時候有說了，由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割，今天我們也來簡單了解一下他的使用，深入學習可能還是要去看官方文檔

1 文件結構

文件結構的話，模塊化的使用要多一個 modules 的文件夾，里面放著細分模塊的 js 文件/模塊名文件夾。

這里官方的標準是一個模塊一個 js 文件，但是要是模塊太復雜的話，也可以把里面的代碼拆分出來。

// store 文件夾 │ actions.js│ getters.js│ index.js│ mutations.js│ state.js│└─modules  │ moduleB.js  │  └─moduleA      index.js      mutation.js      state.js

然后在創建 store 的 js 文件中引入這些模塊，直接

import moduleA from './modules/moduleA/index'import moduleB from './modules/moduleB';export default new Vuex.Store({  state,  getters,  mutations,  actions,  modules: {    moduleA,    moduleB,  }});

2 模塊的局部狀態對象的定義

模塊內部的 getter，mutation 和 action，他們方法接收的參數會和根狀態的不一樣，我們一個一個來

getter

getter 的話，他會有三個參數，第一個是模塊內的 state，第二個是 模塊內的 getters，第三個是根節點狀態 rootState，

const getters = { bFullName: (state, getters, rootState) => `full${state.bName}`}

mutation

mutation 里面的回調函數傳入的第一個參數也是 模塊內的 state，其他和根狀態定義的時候一樣

const mutations = { // 這里的 `state` 對象是模塊的局部狀態 SET_B_NAME(state, payload) {  debugger  state.bName = payload.name; }}

action

最后的 action 的話，他傳入還是只有 context 對象，然后咧，這個對象里面的 state 屬性指模塊內的狀態，rootState 指根狀態，如下

const actions = { ASYNC_SET_NAME({ state, commit, rootState }, payload) {  setTimeout(() => {   state.bName = 'asyncName'  }, 4000) }}

3 使用

3.1 state 獲取

這個的話要在原來狀態名前面加一個模塊名才能放到到模塊內的對象。具體如下

// 原先的基礎上加個模塊名this.$store.state.moduleB.bName;// 輔助函數也一樣，name 前面加個模塊名 Deno...mapState({  name: state => state.moduleB.bName,})

3.2 命名空間

getter，mutation，action 他們默認都是注冊在全局命名空間的，所以我們默認是可以和使用根狀態一樣去使用他們，但是這樣不可避免會出現命名沖突的問題，所以使模塊有更高的封裝性與復用性，我們可以通過添加 `