由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。當應用變得非常復雜時写隶，store 對象就有可能變得相當臃腫玫氢。
為了解決以上問題帚屉，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state漾峡、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 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)
模塊的局部狀態(tài)
對于模塊內(nèi)部的 mutation 和 getter牢屋，接收的第一個參數(shù)是模塊的局部狀態(tài)對象。
const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// 這里的 `state` 對象是模塊的局部狀態(tài)
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
同樣槽袄，對于模塊內(nèi)部的 action烙无，局部狀態(tài)通過 context.state 暴露出來，根節(jié)點狀態(tài)則為 context.rootState：
const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
對于模塊內(nèi)部的 getter遍尺，根節(jié)點狀態(tài)會作為第三個參數(shù)暴露出來：
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
命名空間
默認情況下截酷，模塊內(nèi)部的 action、mutation 和 getter 是注冊在全局命名空間的——這樣使得多個模塊能夠?qū)ν?mutation 或 action 作出響應乾戏。
如果希望你的模塊具有更高的封裝度和復用性迂苛，你可以通過添加 namespaced: true 的方式使其成為命名空間模塊。當模塊被注冊后鼓择，它的所有 getter三幻、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。例如：
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模塊內(nèi)容（module assets）
state: { ... }, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了呐能，使用 `namespaced` 屬性不會對其產(chǎn)生影響
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
},
// 嵌套模塊
modules: {
// 繼承父模塊的命名空間
myPage: {
state: { ... },
getters: {
profile () { ... } // -> getters['account/profile']
}
},
// 進一步嵌套命名空間
posts: {
namespaced: true,
state: { ... },
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
}
}
}
}
})
啟用了命名空間的 getter 和 action 會收到局部化的 getter念搬，dispatch 和 commit。換言之催跪，你在使用模塊內(nèi)容（module assets）時不需要在同一模塊內(nèi)額外添加空間名前綴锁蠕。更改 namespaced 屬性后不需要修改模塊內(nèi)的代碼。
在命名空間模塊內(nèi)訪問全局內(nèi)容（Global Assets）
如果你希望使用全局 state 和 getter懊蒸，rootState 和 rootGetter 會作為第三和第四參數(shù)傳入 getter荣倾，也會通過 context 對象的屬性傳入 action。
若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation骑丸，將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可舌仍。
modules: {
foo: {
namespaced: true,
getters: {
// 在這個模塊的 getter 中妒貌，`getters` 被局部化了
// 你可以使用 getter 的第四個參數(shù)來調(diào)用 `rootGetters`
someGetter (state, getters, rootState, rootGetters) {
getters.someOtherGetter // -> 'foo/someOtherGetter'
rootGetters.someOtherGetter // -> 'someOtherGetter'
},
someOtherGetter: state => { ... }
},
actions: {
// 在這個模塊中， dispatch 和 commit 也被局部化了
// 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit
someAction ({ dispatch, commit, getters, rootGetters }) {
getters.someGetter // -> 'foo/someGetter'
rootGetters.someGetter // -> 'someGetter'
dispatch('someOtherAction') // -> 'foo/someOtherAction'
dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
commit('someMutation') // -> 'foo/someMutation'
commit('someMutation', null, { root: true }) // -> 'someMutation'
},
someOtherAction (ctx, payload) { ... }
}
}
}
帶命名空間的綁定函數(shù)
當使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數(shù)來綁定命名空間模塊時铸豁，寫起來可能比較繁瑣：
const store = new Vuex.Store({
modules: {
some: {
namespaced: true,
modules: {
nested: {
namespaced: true,
modules: {
module: { // some/nested/module
namespaced: true,
state: {
a: '1',
b: '2'
},
getters: {
foo :state=>state.a,
var: state=>state.b
}
}
}
}
}
}
}
})
computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
})
},
methods: {
...mapActions([
'some/nested/module/foo',
'some/nested/module/bar'
])
}
對于這種情況灌曙，你可以將模塊的空間名稱字符串作為第一個參數(shù)傳遞給上述函數(shù)，這樣所有綁定都會自動將該模塊作為上下文节芥。于是上面的例子可以簡化為：
computed: {
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module', [
'foo',
'bar'
])
}
而且在刺，你可以通過使用 createNamespacedHelpers 創(chuàng)建基于某個命名空間輔助函數(shù)。它返回一個對象头镊，對象里有新的綁定在給定命名空間值上的組件綁定輔助函數(shù)：
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
computed: {
// 在 `some/nested/module` 中查找
...mapState({
a: state => state.a,
b: state => state.b
})
},
methods: {
// 在 `some/nested/module` 中查找
...mapActions([
'foo',
'bar'
])
}
}
模塊動態(tài)注冊
在 store 創(chuàng)建之后蚣驼，你可以使用store.registerModule方法注冊模塊：
// 注冊模塊 `myModule`
store.registerModule('myModule', {
// ...
})
// 注冊嵌套模塊 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
// ...
})
之后就可以通過store.state.myModule和store.state.nested.myModule訪問模塊的狀態(tài)。
模塊動態(tài)注冊功能使得其他 Vue 插件可以通過在 store 中附加新模塊的方式來使用 Vuex 管理狀態(tài)相艇。例如颖杏，vuex-router-sync插件就是通過動態(tài)注冊模塊將 vue-router 和 vuex 結(jié)合在一起，實現(xiàn)應用的路由狀態(tài)管理坛芽。
你也可以使用store.unregisterModule(moduleName)來動態(tài)卸載模塊留储。注意，你不能使用此方法卸載靜態(tài)模塊（即創(chuàng)建 store 時聲明的模塊）咙轩。
在注冊一個新 module 時获讳，你很有可能想保留過去的 state，例如從一個服務端渲染的應用保留 state臭墨。你可以通過preserveState選項將其歸檔：store.registerModule('a', module, { preserveState: true })赔嚎。
模塊重用
有時我們可能需要創(chuàng)建一個模塊的多個實例，例如：
- 創(chuàng)建多個 store胧弛，他們公用同一個模塊 (例如當
runInNewContext選項是false或'once'時尤误，為了在服務端渲染中避免有狀態(tài)的單例) - 在一個 store 中多次注冊同一個模塊
如果我們使用一個純對象來聲明模塊的狀態(tài)，那么這個狀態(tài)對象會通過引用被共享结缚，導致狀態(tài)對象被修改時 store 或模塊間數(shù)據(jù)互相污染的問題损晤。
實際上這和 Vue 組件內(nèi)的data是同樣的問題。因此解決辦法也是相同的——使用一個函數(shù)來聲明模塊狀態(tài)（僅 2.3.0+ 支持）：
const MyReusableModule = {
state () {
return {
foo: 'bar'
}
},
// mutation, action 和 getter 等等...
}
