由于使用單一狀態(tài)樹你画，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)戈二，store 對(duì)象就有可能變得相當(dāng)臃腫预柒。
為了解決以上問題队塘，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state卫旱、mutation人灼、action、getter顾翼、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割:
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同級(jí)創(chuàng)建 store文件夾，里面的結(jié)果如圖：
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
}
這里分別定義一個(gè)價(jià)格和數(shù)量的state屬性适贸，用來改變數(shù)據(jù)灸芳。
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
}
})
這里主要的就是導(dǎo)出的時(shí)候，是將money和count以module模塊的形式導(dǎo)出拜姿，然后在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上面蕊肥。不管哪個(gè)界面都可以去使用任意的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的時(shí)候用法
// methods: mapActions( ["add", "reduce"])
};
</script>
值得注意的是，這里mapActions后面不是直接跟a.js和b.js的action展东，而是第一個(gè)參數(shù)聲明module模塊count,后面跟著count里面的actions赔硫。
如何使用分發(fā)的actions?其實(shí)是和之前是一樣的
<button @click="add(num)">單價(jià)增加</button>
<button @click="reduce(num)">單價(jià)減少</button>
這里就實(shí)現(xiàn)了不管是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>
這樣使用的話爪膊，多個(gè)module的方法命名是不能重復(fù)的权悟，不然會(huì)實(shí)現(xiàn)最后一個(gè)module里面的方法。
用法:
<button @click="add1(num)">單價(jià)增加</button>
<button @click="reduce1(num)">單價(jià)減少</button>
<br>
<button @click="add(num)">數(shù)量增加</button>
<button @click="reduce(num)">數(shù)量減少</button>
