vue在做大型項目時，會用到多狀態管理，vuex允許我們將store分割成多個模塊，每個模塊內都有自己的state、mutation、action、getter。模塊內還可以繼續嵌套相對應的子模塊。
為了鞏固我自己對store多模塊的一些基本認識，寫了個簡單的多模塊實例，下圖為我自己創建的store的目錄結構，modules文件夾內的模塊，在實際項目中還可以繼續分開類似store目錄下的多文件結構，也就是單獨的模塊文件夾，方便后期修改。
store目錄結構
./store/index.js的代碼如下：
import Vue from 'vue'
import Vuex from 'vuex'
// import mutations from './mutations'
import modulesA from './modules/modulesA'
import modulesB from './modules/modulesB'
Vue.use(Vuex)
const state = {
logined: false,
userid: -1
}
const store = new Vuex.Store({
state,
mutations: {
'UPDATE_LOGIN_STATUS': (state, payload) => {
state.logined = true
}
},
modules: {
modulesA: modulesA,
modulesB: modulesB
}
})
export default store
這里為了方便和子模塊進行對比，我將mutations.js的代碼放到index.js里面
modulesA.js的代碼如下：
const moduleA = {
namespaced: true,
state: {
isVip1: false
},
mutations: {
'UPDATE_TO_VIP1': (state, payload) => {
state.isVip1 = true
}
},
actions: {
getVip1 ({ state, commit, rootState }) {
commit('UPDATE_TO_VIP1')
}
},
getters: {}
}
export default moduleA
modulesB.js的代碼如下：
const moduleB = {
// namespaced: true,
state: {
isVip2: false
},
mutations: {
'UPDATE_TO_VIP2': (state, payload) => {
state.isVip2 = true
}
},
actions: {
getVip2 ({ state, commit, rootState }) {
commit('UPDATE_TO_VIP2')
}
},
getters: {}
}
export default moduleB
估計看到這里，你會發現modulesA和modulesB的區別就是有無namespaced這個屬性。在vuex內，模塊內部的action、mutation、getter都會被注冊在全局命名空間內，俗話就是注冊成全局的，這樣做的結果就是在調用相對應的名字的的action或者mutation或者getter的時候，所有同名的都將會被響應。讓我們來看看當沒有namespaced（或者值為false）的時候，在組件內是怎么調用的，代碼如下：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li>global state <strong>logined</strong>: {{ globalState }}</li>
<li>modulesA state <strong>isVip1</strong> {{ modulesAState }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
msg: 'Test vuex mutilple modules'
}
},
created () {
console.log(this.$store.state)
setTimeout(() => {
this.$store.commit('UPDATE_LOGIN_STATUS')
}, 1000)
setTimeout(() => {
this.$store.commit('UPDATE_TO_VIP1')
// this.$store.dispatch('getVip1')
}, 2000)
setTimeout(() => {
// this.$store.commit('CANCEL_VIP1')
this.$store.dispatch('cancelVip1')
}, 3000)
},
computed: {
globalState () {
return this.$store.state.logined
},
modulesAState () {
return this.$store.state.modulesA.isVip1
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
執行代碼的截圖如下：
可以看到，我在store里面commit一個UPDATE_LOGIN_STATUS，將最頂層state中的logined的值改為true。2s的時候在store里面commit了UPDATE_TO_VIP1和3s的時候dispatch了一個事件CANCEL_VIP1，將modulesA的isVip1的值從false => true => false。說明沒有開啟命名空間是可以直接commit或者dispatch子模塊內相對應的方法名，是可以修改到自身state中的屬性的。
如果namespaced的值為true時，那么就是開啟了命名空間模塊，調用子模塊的getter、mutation、getter的時候就跟之前不一樣了，vuex它內部會自動根據模塊注冊的路徑調整命名，比如要dispatch B中的一個action的話，那么組件內的調用就應該是如下這樣的：
// this.$store.dispatch('modulesB/getVip2')
this.$store.commit('modulesB/UPDATE_TO_VIP2')
日常項目中，在store有多個狀態需要管理的時候，一般來說是應該要開啟namespaced的，這樣子能夠使我們的代碼能夠有更強的封裝性以及更少的耦合。
補充知識：Vuex 模塊化+命名空間后, 如何調用其他模塊的 state, actions, mutations, getters ?
由于 Vuex 使用了單一狀態樹，應用的所有狀態都包含在一個大對象中。那么，隨著應用的不斷擴展，store 會變得非常臃腫。
為了解決這個問題，Vuex 允許我們把 store 分 module（模塊）。每一個模塊包含各自的狀態、mutation、action 和 getter。
那么問題來了, 模塊化+命名空間之后, 數據都是相對獨立的, 如果想在模塊 A 調用 模塊 B 的state, actions, mutations, getters, 該腫么辦?
假設有這么兩個模塊:
模塊A:
import api from '~api'
const state = {
vip: {},
}
const actions = {
async ['get']({commit, state, dispatch}, config = {}) {
try {
const { data: { code, data } } = await api.post('vip/getVipBaseInfo', config)
if (code === 1001) commit('receive', data)
} catch(error) { console.log(error) }
}
}
const mutations = {
['receive'](state, data) {
state.vip = data
}
}
const getters = {
['get'](state) {
return state.vip
},
}
export default {
namespaced: true,
state,
actions,
mutations,
getters
}
模塊B:
import api from '~api'
const state = {
shop: {},
}
const actions = {
async ['get']({commit, state, dispatch}, config = {}) {
try {
const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
if (code === 1001) commit('receive', data)
} catch(error) { console.log(error) }
}
}
const mutations = {
['receive'](state, data) {
state.shop = data
}
}
const getters = {
['get'](state) {
return state.shop
},
}
export default {
namespaced: true,
state,
actions,
mutations,
getters
}
假設模塊 B 的 actions 里, 需要用模塊 A 的 state 該怎么辦?
const actions = {
async ['shop'](store, config = {}) {
const { commit, dispatch, state, rootState } = store
console.log(rootState) // 打印根 state
console.log(rootState.vip) // 打印其他模塊的 state
try {
const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
if (code === 1001) commit('receive', data)
} catch(error) { console.log(error) }
}
}
我們來看下上面的代碼, actions 中的 shop 方法, 有 2 個參數, 第一個是 store, 第二個是 dispatch 調用時傳過來的參數
store 這個對象又包含了 4 個鍵, 其中 commit 是調用 mutations 用的, dispatch 是調用 actions 用的, state 是當前模塊的 state, 而 rootState 是根 state,
既然能拿到根 state, 想取其他模塊的 state 是不是就很簡單了...?
假設模塊 B 的 actions 里, 需要調用模塊 A 的 actions 該怎么辦?
const actions = {
async ['shop'](store, config = {}) {
const { commit, dispatch, state, rootState } = store
try {
const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config, 'get')
if (code === 1001) commit('receive', data) // 調用當前模塊的 mutations
dispatch('vip/get', {}, {root: true}) // 調用其他模塊的 actions} catch(error) { console.log(error) }
}
}
上面的代碼中dispatch('vip/vip', {}, {root: true})就是在模塊 B 調用 模塊 A 的 actions,
有 3 個參數, 第一個參數是其他模塊的 actions 路徑, 第二個是傳給 actions 的數據, 如果不需要傳數據, 也必須預留, 第三個參數是配置選項, 申明這個 acitons 不是當前模塊的
假設模塊 B 的 actions 里, 需要調用模塊 A 的 mutations 該怎么辦?
const actions = {
async ['shop'](store, config = {}) {
const { commit, dispatch, state, rootState } = store
try {
const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
if (code === 1001) commit('receive', data) // 調用當前模塊的 mutations
commit('vip/receive', data, {root: true}) // 調用其他模塊的 mutations
} catch(error) { console.log(error) }
}
}
上面的代碼中commit('vip/receive', {}, {root: true})就是在模塊 B 調用 模塊 A 的 mutations,
有 3 個參數, 第一個參數是其他模塊的 mutations 路徑, 第二個是傳給 mutations 的數據, 如果不需要傳數據, 也必須預留, 第三個參數是配置選項, 申明這個 mutations 不是當前模塊的
假設模塊 B 的 actions 里, 需要用模塊 A 的 getters 該怎么辦?
const actions = {
async ['shop'](store, config = {}) {
const { commit, dispatch, state, rootState, rootGetters } = store
console.log(rootGetters['vip/get']) // 打印其他模塊的 getters
try {
const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
if (code === 1001) commit('receive', data)
} catch(error) { console.log(error) }
}
}
const actions = {
async ['shop'](store, config = {}) {
const { commit, dispatch, state, rootState, rootGetters } = store
console.log(rootGetters['vip/get']) // 打印其他模塊的 getters
try {
const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
if (code === 1001) commit('receive', data)
} catch(error) { console.log(error) }
}
}
我們來看下上面的代碼, 相比之前的代碼, store 又多了一個鍵: rootGetters
rootGetters 就是 vuex 中所有的 getters, 你可以用 rootGetters['xxxxx'] 來取其他模塊的getters
