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) }
    }
}

上面的程式碼中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) }
    }
}

我們來看下上面的程式碼, 相比之前的程式碼, store 又多了一個鍵: rootGetters
rootGetters 就是 vuex 中所有的 getters, 你可以用 rootGetters['xxxxx'] 來取其他模組的getters

https://vuex.vuejs.org/zh-cn/modules.html

https://www.cnblogs.com/yeziT