Vuex之Module的分模块本身就毫无意义，如果分模块后可以部分加载什么的可能还有点性能上的优化，然而并没有，Vuex的设计初衷是公共状态管理。
vuex被设计出来并不是为了代替Vue的，它只是一个工具而已，因此在实际使用过程中一般没必要去分成许多模块。
一般公共状态就是公共状态，他不能被归类到某一模块中去，他是所有子模块共用的。下面讲几点用法：
1.modules
由于使用单一的状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂，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 的状态
store.state.b // -> moduleB 的状态2.模块的局部状态（不讲）
对于模块内部的mutation和getter，接受的第一个参数是模块的局部状态对象。
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}同样，对于模块内部的action，局部状态通过context.state暴露出来，根节点状态则为content.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
}
}
}3.命名空间
默认情况下，模块内部的action，mutation，getter是注册在全局命名空间的。
这样使得多个模块能够对同一mutation或者action做出响应；
如果希望你的模块更加自包含或者提高可重用性，你可以通过添加namespaced:true 的方式使其成为命名空间模块，当模块被注册后，他的所有getter，action，mutation都会自动根据模块注册的路径调整命名；
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模块内容（module assets）
state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
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']
}
}
}
}
}
})4.在命名空间模块内部访问全局内容（不讲）
如果你希望使用全局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'
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) { ... }
}
}
}5.带命名空间的绑定函数（不讲）
当使用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']()
])
}
