由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，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 的状态
这是官方的介绍，我们这里把moduleA和moduleB分开文件来说明：
首先在app.vue同级创建 store文件夹，里面的结果如图：
a.js和b.js里面的代码为：
//a.js
const state = {
money:10
}
const mutations = {
add(state,num){
state.money+=parseInt(num)
},
reduce(state,num){
state.money-=parseInt(num)
}
}
const actions={
add:({commit},num)=>{
commit('add',num)
},
reduce:({commit},num)=>{
commit('reduce',num)
}
}
export default {
namespaced:true,
state,
mutations,
actions
}
//b.js
const state = {
count:2
}
const mutations = {
add(state,num){
state.count+=num
},
reduce(state){
state.count--
}
}
const actions={
add:({commit},num)=>{
commit('add',num)
},
reduce:({commit})=>{
commit('reduce')
}
}
export default {
namespaced:true,
state,
mutations,
actions
}
这里分别定义一个价格和数量的state属性，用来改变数据。
index.js里面代码为：
import Vue from 'vue'
import Vuex from 'vuex'
import money from './modules/a'
import count from './modules/b'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
money,
count
}
})
这里主要的就是导出的时候，是将money和count以module模块的形式导出，然后在main.js里面注册store
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')
这样就可以使用a.js和b.js里面的state了。表示方式为：
$store.state.money.money //a.js里面state
$store.state.count.count//b.js里面的state
这样的话，就把a.js和b.js的state都绑定到store.state上面。不管哪个界面都可以去使用任意的state。
这里还需要说明的是a.js和b.js里面的mutation的使用。先在components里面创建a.vue、b.vue界面。界面中分发a.js和b.js的action写法如下：
值得注意的是，这里mapActions后面不是直接跟a.js和b.js的action，而是第一个参数声明module模块count,后面跟着count里面的actions。
如何使用分发的actions?其实是和之前是一样的
这里就实现了不管是a.vue还是b.vue都可以使用a.js和b.js的actions和state
如果a.vue里面想要使用a.js和b.js的actions，则写法需要改变下，如：
这样使用的话，多个module的方法命名是不能重复的，不然会实现最后一个module里面的方法。
用法: