Vuex Modules

由于使用了單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)都包含在一個(gè)大對(duì)象內(nèi)。但是，隨著我們應(yīng)用規(guī)模的不斷增長(zhǎng)，這個(gè)Store變得非常臃腫。

為了解決這個(gè)問(wèn)題，Vuex 允許我們把 store 分 module（模塊）。每一個(gè)模塊包含各自的狀態(tài)、mutation、action 和 getter，甚至是嵌套模塊， 如下就是它的組織方式：

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
}
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}
const store = new Vuex.Store({
 modules: {
   a: moduleA,
   b: moduleB
 }
})
store.state.a // -> moduleA's state
store.state.b // -> moduleB's state

模塊本地狀態(tài)

模塊的 mutations 和 getters方法第一個(gè)接收參數(shù)是模塊的本地狀態(tài)。

const moduleA = {
 state: { count: 0 },
 mutations: {
   increment: (state) {
     // state 是模塊本地的狀態(tài)。
     state.count++
   }
 },
 getters: {
   doubleCount (state) {
     return state.count * 2
   }
 }
}

相似地，在模塊的 actions 中，context.state 暴露的是本地狀態(tài)， context.rootState暴露的才是根狀態(tài)。

const moduleA = {
 // ...
 actions: {
   incrementIfOdd ({ state, commit }) {
     if (state.count % 2 === 1) {
       commit('increment')
     }
   }
 }
}

在模塊的 getters 內(nèi)，根狀態(tài)也會(huì)作為第三個(gè)參數(shù)暴露。

const moduleA = {
 // ...
 getters: {
   sumWithRootCount (state, getters, rootState) {
     return state.count + rootState.count
   }
 }
}

命名空間

要注意，模塊內(nèi)的 actions、mutations 以及 getters 依然注冊(cè)在全局命名空間內(nèi) —— 這就會(huì)讓多個(gè)模塊響應(yīng)同一種 mutation/action 類型。你可以在模塊的名稱中加入前綴或者后綴來(lái)設(shè)定命名空間，從而避免命名沖突。如果你的 Vuex 模塊是一個(gè)可復(fù)用的，執(zhí)行環(huán)境也未知的，那你就應(yīng)該這么干了。例如，我們想要?jiǎng)?chuàng)建一個(gè) todos 模塊：

// types.js
// 定義  getter、 action 和 mutation 的常量名稱
// 并且在模塊名稱上加上 `todos` 前綴
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'

// modules/todos.js
import * as types from '../types'
// 用帶前綴的名稱來(lái)定義 getters, actions and mutations
const todosModule = {
 state: { todos: [] },
 getters: {
   [types.DONE_COUNT] (state) {
     // ...
   }
 },
 actions: {
   [types.FETCH_ALL] (context, payload) {
     // ...
   }
 },
 mutations: {
   [types.TOGGLE_DONE] (state, payload) {
     // ...
   }
 }
}

注冊(cè)動(dòng)態(tài)模塊

你可以用 store.registerModule 方法在 store 創(chuàng)建之后注冊(cè)一個(gè)模塊：

store.registerModule('myModule', {
 // ...
})

模塊的 store.state.myModule 暴露為模塊的狀態(tài)。

其他的 Vue 插件可以為應(yīng)用的 store 附加一個(gè)模塊，然后通過(guò)動(dòng)態(tài)注冊(cè)就可以使用 Vuex 的狀態(tài)管理功能了。例如，vuex-router-sync 庫(kù)，通過(guò)在一個(gè)動(dòng)態(tài)注冊(cè)的模塊中管理應(yīng)用的路由狀態(tài)，從而將 vue-router 和 vuex 集成。

你也能用 store.unregisterModule(moduleName) 移除動(dòng)態(tài)注冊(cè)過(guò)的模塊。但是你不能用這個(gè)方法移除靜態(tài)的模塊（也就是在 store 創(chuàng)建的時(shí)候聲明的模塊）。