前言 上回我們說了一下 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 他們默認都是注冊在全局命名空間的，所以我們默認是可以和使用根狀態一樣去使用他們，但是這樣不可避免會出現命名沖突的問題，所以使模塊有更高的封裝性與復用性，我們可以通過添加 `
namespaced: true` 使其成為帶命名空間的模塊。當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據模塊注冊的路徑調整命名。
// moduleB 模塊導出的時候加個 namespaced: true,export default { namespaced: true, state, getters, mutations, actions,}3.2.1 輔助函數的使用
因為有了命名空間這么一層封裝，所以我們在用輔助函數的時候都要多加那么一層模塊名，具體看下面代碼。
// getterthis.$store.getters['moduleB/bFullName']; ...mapGetters({ bGetter2: 'moduleB/bFullName'})// mutation this.$store.commit('moduleB/SET_B_NAME', { name: 'QQ'});...mapMutations({ setBname: 'moduleB/SET_B_NAME'}),// actionthis.$store.dispatch('moduleB/ASYNC_SET_NAME', { name: "JJ" });...mapActions({ aSetAge: 'moduleB/ASYNC_SET_NAME',}),每次都要寫模塊名，這樣寫下來很煩，所以這些輔助函數給我們提供了一個參數位來綁定命名空間。
// moduleB 模塊內的 bName...mapState('moduleB', { name: state => state.bName})// 同理 mapAction mapMutation 也可以這個樣子...mapAction('moduleB',[ '/ASYNC_SET_NAME'])除了這個之外，如果你當前組件用的 vuex 狀態都是一個模塊的話，我們可以使用 createNamespacedHelpers 創建基于某個命名空間輔助函數，如下：
import { createNamespacedHelpers } from 'vuex'const { mapState, mapActions } = createNamespacedHelpers('moduleB') // moduleName這樣創建之后，我們就可以用之前的寫法來訪問到模塊的狀態。
...mapState({ bName: state => state.bName,}),3.2.2 在帶命名空間的模塊內訪問全局內容
如果你希望使用全局 state 和 getter，rootState 和 rootGetter 會作為第三和第四參數傳入 getter，也會通過 context 對象的屬性傳入 action。
若需要在全局命名空間內分發 action 或提交 mutation，將 { root: true } 作為第三參數傳給 dispatch 或 commit 即可。具體看下面代碼：
modules: { foo: { namespaced: true, getters: { // 在這個模塊的 getter 中，`getters` 被局部化了 // 你可以使用 getter 的第四個參數來調用 `rootGetters` someGetter (state, getters, rootState, rootGetters) { getters.someOtherGetter // -> 'foo/someOtherGetter 模塊內的 getter' rootGetters.someOtherGetter // -> 'someOtherGetter 全局的getter' }, someOtherGetter: state => { ... } }, actions: { // 在這個模塊中， dispatch 和 commit 也被局部化了 // 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit someAction ({ dispatch, commit, getters, rootGetters }) { getters.someGetter // -> 'foo/someGetter' rootGetters.someGetter // -> 'someGetter' dispatch('someOtherAction') // -> 'foo/someOtherAction' 模塊內的 action dispatch('someOtherAction', null, { root: true }) // ->'someOtherAction' 全局的 action commit('someMutation') // -> 'foo/someMutation' 模塊內的 action commit('someMutation', null, { root: true }) // -> 'someMutation' 全局 mutation }, someOtherAction (ctx, payload) { ... } } }}3.2.3 將模塊內的 action 注冊為全局
這個感覺和維護模塊的封裝性有點沖突，但是既然作者提出來了，那就學吧，當我們想要我們模塊內的某個 action 提升為全局 action 的時候，在他聲明的時候，添加 root: true，并將 action 的定義放到 hanler 函數中，具體如下：
const actions = { // 模塊內 action [ASET_AGE]({ commit }, payload) { setTimeout(() => { commit('SET_B_NAME', payload.name); }, 2000) }, // 提升到全局的 action globalAction: { root: true, handler({ commit }, payload) { debugger setTimeout(() => { commit('SET_B_NAME', payload.name); }, 2000) } }}關于模塊使用 Vuex 的介紹就說到這里了，這兩篇筆記的項目源碼我發到了 GitHub 上面，大家可以去看一下，要是項目中有啥不明白的或者我說的有問題的，歡迎大家留言指正。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
