## **一：Module**
>[success]Vuex 允許我們將 store 分割成**模塊（module）**。每個(gè)模塊擁有自己的 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)**
對(duì)于模塊內(nèi)部的 mutation 和 getter，接收的第一個(gè)參數(shù)是**模塊的局部狀態(tài)對(duì)象**。
~~~
const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// 這里的 `state` 對(duì)象是模塊的局部狀態(tài)
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
~~~
同樣，對(duì)于模塊內(nèi)部的 action，局部狀態(tài)通過`context.state`暴露出來，根節(jié)點(diǎn)狀態(tài)則為`context.rootState`：
~~~
const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
~~~
對(duì)于模塊內(nèi)部的 getter，根節(jié)點(diǎn)狀態(tài)會(huì)作為第三個(gè)參數(shù)暴露出來：
~~~
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
~~~
## **命名空間**
**默認(rèn)情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊(cè)在全局命名空間的**
##
如果希望你的模塊具有更高的**封裝度**和**復(fù)用性**，使用命名空間后可以在模塊內(nèi)部嵌入子模塊，并且無需修改代碼，只需要在模塊中設(shè)置 `namespaced: true`即可。（例如在工單模塊下嵌入預(yù)約單等等）
~~~
const store = new Vuex.Store({
modules: {
trade: {//工單模塊
namespaced: true,
// 模塊內(nèi)容（module assets）
state: { ... }, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了，使用 `namespaced` 屬性不會(huì)對(duì)其產(chǎn)生影響
getters: {
isAdmin () { ... } // -> getters['trade/isAdmin']
},
actions: {
login () { ... } // -> dispatch('trade/login')
},
mutations: {
login () { ... } // -> commit('trade/login')
},
// 嵌套子模塊
modules: {
// 繼承父模塊的命名空間
schedule: { //預(yù)約單模塊
state: { ... },
getters: {
profile () { ... } // -> getters['trade/profile']
}
},
// 進(jìn)一步嵌套命名空間
posts: {
namespaced: true,
state: { ... },
getters: {
popular () { ... } // -> getters['trade/posts/popular']
}
}
}
}
}
})
~~~
## **在帶命名空間的模塊內(nèi)訪問根模塊**
* 如果想要訪問根模塊的`state`和`getter`，只需要在第三和第四個(gè)參數(shù)傳入`rootState`和`rootGetters`即可。
* 如果想觸發(fā)根模塊的`action`和`mutation`，只需要將`{ root: true }`作為第三參數(shù)傳給`dispatch`或`commit`即可。
~~~
modules: {
foo: {
namespaced: true,
getters: {
// 在這個(gè)模塊的 getter 中，`getters` 被局部化了
// 你可以使用 getter 的第四個(gè)參數(shù)來調(diào)用 `rootGetters`
someGetter (state, getters, rootState, rootGetters) {
getters.someOtherGetter // -> 'foo/someOtherGetter'
rootGetters.someOtherGetter // -> 'someOtherGetter'
},
someOtherGetter: state => { ... }
},
actions: {
// 在這個(gè)模塊中， 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ù)**
當(dāng)使用了命名空間的模塊，要在組件中使用`mapState`,`mapGetters`,`mapActions`和`mapMutations`訪問時(shí)，寫起來會(huì)比較繁瑣：
~~~
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']()
])
}
~~~
針對(duì)上述問題Vuex提供了兩種方法解決：
**1.將模塊的空間名稱作為第一個(gè)參數(shù)傳遞給`mapState`,`mapGetters`,`mapActions`和`mapMutations`**
**2.使用`createNamespacedHelpers`函數(shù)創(chuàng)建帶命名空間的`mapState`,`mapGetters`,`mapActions`和`mapMutations`**
>[info] 將命名空間作為參數(shù)傳遞：
~~~
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`函數(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'
])
}
}
~~~
- 目錄結(jié)構(gòu)
- 指令
- 條件渲染
- 列表渲染
- 自定義指令
- 修飾符
- 組件
- 生命周期
- 計(jì)算屬性和監(jiān)聽屬性
- 全局注冊(cè)和局部注冊(cè)
- 動(dòng)態(tài)組件
- 異步組件
- 插槽
- Prop
- 自定義事件
- 訪問元素 & 組件
- 混入
- 渲染函數(shù)
- JSX
- 組件的依賴注入
- 遞歸組件
- 路由
- 命名路由
- 路由組件傳參
- 路由守衛(wèi)
- 網(wǎng)絡(luò)請(qǐng)求
- 表單
- 狀態(tài)管理器
- State
- Getter
- Mutation
- Action
- Module
- CLI命令
- 安裝Vue CLI
- 創(chuàng)建Vue項(xiàng)目
- 啟動(dòng)應(yīng)用
- 相關(guān)概念
- 對(duì)象解構(gòu)賦值