由于使用單一狀態(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)

這是官方的介紹，我們這里把moduleA和moduleB分開文件來說明：

首先在app.vue同級創(chuàng)建 store文件夾，里面的結果如圖：

image.png

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里面創(chuàng)建a.vue、b.vue界面。界面中分發(fā)a.js和b.js的action寫法如下：

<script>
import { mapActions } from "vuex";
export default {
  methods: mapActions("count", ["add", "reduce"])
//沒有聲明module的時候用法
 // methods: mapActions( ["add", "reduce"])
};
</script>

值得注意的是，這里mapActions后面不是直接跟a.js和b.js的action，而是第一個參數聲明module模塊count,后面跟著count里面的actions。
如何使用分發(fā)的actions?其實是和之前是一樣的

<button @click="add(num)">單價增加</button>
<button @click="reduce(num)">單價減少</button>

這里就實現了不管是a.vue還是b.vue都可以使用a.js和b.js的actions和state
如果a.vue里面想要使用a.js和b.js的actions，則寫法需要改變下，如：

<script>
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions("money", ["add1", "reduce1"])
    ...mapActions("count", ["add", "reduce"])
}
};
</script>

這樣使用的話，多個module的方法命名是不能重復的，不然會實現最后一個module里面的方法。
用法:

<button @click="add1(num)">單價增加</button>
<button @click="reduce1(num)">單價減少</button>
<br>
<button @click="add(num)">數量增加</button>
<button @click="reduce(num)">數量減少</button>