## **一：Module**
>[success]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 的狀態
store.state.b // -> moduleB 的狀態
~~~
## **二：模塊的局部狀態**
對于模塊內部的 mutation 和 getter，接收的第一個參數是**模塊的局部狀態對象**。
~~~
const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// 這里的 `state` 對象是模塊的局部狀態
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
~~~
同樣，對于模塊內部的 action，局部狀態通過`context.state`暴露出來，根節點狀態則為`context.rootState`：
~~~
const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
~~~
對于模塊內部的 getter，根節點狀態會作為第三個參數暴露出來：
~~~
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
~~~
## **命名空間**
**默認情況下，模塊內部的 action、mutation 和 getter 是注冊在全局命名空間的**
##
如果希望你的模塊具有更高的**封裝度**和**復用性**，使用命名空間后可以在模塊內部嵌入子模塊，并且無需修改代碼，只需要在模塊中設置 `namespaced: true`即可。（例如在工單模塊下嵌入預約單等等）
~~~
const store = new Vuex.Store({
modules: {
trade: {//工單模塊
namespaced: true,
// 模塊內容（module assets）
state: { ... }, // 模塊內的狀態已經是嵌套的了，使用 `namespaced` 屬性不會對其產生影響
getters: {
isAdmin () { ... } // -> getters['trade/isAdmin']
},
actions: {
login () { ... } // -> dispatch('trade/login')
},
mutations: {
login () { ... } // -> commit('trade/login')
},
// 嵌套子模塊
modules: {
// 繼承父模塊的命名空間
schedule: { //預約單模塊
state: { ... },
getters: {
profile () { ... } // -> getters['trade/profile']
}
},
// 進一步嵌套命名空間
posts: {
namespaced: true,
state: { ... },
getters: {
popular () { ... } // -> getters['trade/posts/popular']
}
}
}
}
}
})
~~~
## **在帶命名空間的模塊內訪問根模塊**
* 如果想要訪問根模塊的`state`和`getter`，只需要在第三和第四個參數傳入`rootState`和`rootGetters`即可。
* 如果想觸發根模塊的`action`和`mutation`，只需要將`{ root: true }`作為第三參數傳給`dispatch`或`commit`即可。
~~~
modules: {
foo: {
namespaced: true,
getters: {
// 在這個模塊的 getter 中，`getters` 被局部化了
// 你可以使用 getter 的第四個參數來調用 `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) { ... }
}
}
}
~~~
## **帶命名空間的綁定函數**
當使用了命名空間的模塊，要在組件中使用`mapState`,`mapGetters`,`mapActions`和`mapMutations`訪問時，寫起來會比較繁瑣：
~~~
computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
})
},
methods: {
...mapActions([
'some/nested/module/foo', // -> this['some/nested/module/foo']()
'some/nested/module/bar' // -> this['some/nested/module/bar']()
])
}
~~~
針對上述問題Vuex提供了兩種方法解決：
**1.將模塊的空間名稱作為第一個參數傳遞給`mapState`,`mapGetters`,`mapActions`和`mapMutations`**
**2.使用`createNamespacedHelpers`函數創建帶命名空間的`mapState`,`mapGetters`,`mapActions`和`mapMutations`**
>[info] 將命名空間作為參數傳遞：
~~~
computed: {
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module', [
'foo', // -> this.foo()
'bar' // -> this.bar()
])
}
~~~
>[info] 使用`createNamespacedHelpers`函數：
~~~
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'
])
}
}
~~~
