VueX模块化之后？Vuex模块化+命名空间后,如何调用其他模块的state,actions,mutations,get

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 = {
    model_a: {},
}

const actions = {
    async ['get']({commit, state, dispatch}, config = {}) {
        try {
            const { data: { code, data } } = await api.post('xxx/xxx', config)
            if (code === 1001) commit('MODEL_A', data)
        } catch(error) { console.log(error) }
    }
}

const mutations = {
    ['MODEL_A'](state, data) {
        state.model_a = data
    }
}

const getters = {
    ['get'](state) {
        return state.model_a
    },
}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}

模块b:

import api from 'api'

const state = {
    model_b: {},
}

const actions = {
    async ['get']({commit, state, dispatch}, config = {}) {
        try {
            const { data: { code, data } } = await api.post('xxx/xxx', config)
            if (code === 1001) commit('MODEL_B', data)
        } catch(error) { console.log(error) }
    }
}

const mutations = {
    ['MODEL_B'](state, data) {
        state.model_b = data
    }
}

const getters = {
    ['get'](state) {
        return state.model_b
    },
}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}

1，假设模块 B 的 actions 里, 需要用模块 A 的 state 该怎么办?

const actions = {
    async ['get'](store, config = {}) {
        const { commit, dispatch, state, rootState } = store
        console.log(rootState) // 打印根 state
        console.log(rootState.model_a) // 打印其他模块的 state 这里就示例打印了模块a 里面的model_a
        try {
            const { data: { code, data } } = await api.post('xxx/xxx', config)
            if (code === 1001) commit('MODEL_B', data)
        } catch(error) { console.log(error) }
    }
}

我们来看下上面的代码, actions 中的 get 方法, 有 2 个参数, 第一个是 store, 第二个是 dispatch 调用时传过来的参数 store 这个对象又包含了 4 个键, 其中 commit 是调用 mutations 用的, dispatch 是调用 actions 用的, state 是当前模块的 state, 而 rootState 是根 state, 既然能拿到根 state, 想取其他模块的 state 在rootState里取岂不乐哉?

2 ，假设模块 B 的 actions 里, 需要调用模块 A 的 actions 该怎么办?

const actions = {
    async ['get'](store, config = {}) {
        const { commit, dispatch, state, rootState } = store
        try {
            const { data: { code, data } } = await api.post('xxx/xxx', config, 'get')
            if (code === 1001) commit('MODEL_B', data) // 调用当前模块的 mutations
            dispatch('model_a/get', {}, {root: true}) // 调用其他模块的 actions
        } catch(error) { console.log(error) }
    }
}

上面的代码中dispatch('model_a/get', {}, {root: true})就是在模块 B 调用模块 A 的 actions, 有 3 个参数, 第一个参数是其他模块的 actions 路径, 第二个是传给 actions 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 acitons 不是当前模块的

3，假设模块 B 的 actions 里, 需要调用模块 A 的 mutations 该怎么办?

const actions = {
    async ['get'](store, config = {}) {
        const { commit, dispatch, state, rootState } = store
        try {
            const { data: { code, data } } = await api.post('xxx/xxx', config)
            if (code === 1001) commit('MODEL_B', data) // 调用当前模块的 mutations
            commit('model_a/MODEL_A', data, {root: true}) // 调用其他模块的 mutations
        } catch(error) { console.log(error) }
    }
}

上面的代码中commit('model_a/MODEL_A', {}, {root: true})就是在模块 B 调用模块 A 的 mutations, 有 3 个参数, 第一个参数是其他模块的 mutations 路径, 第二个是传给 mutations 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 mutations 不是当前模块的

4,假设模块 B 的 actions 里, 需要用模块 A 的 getters 该怎么办?

const actions = {
    async ['get'](store, config = {}) {
        const { commit, dispatch, state, rootState, rootGetters } = store
        console.log(rootGetters['model_a/get']) // 打印其他模块的 getters
        try {
            const { data: { code, data } } = await api.post('xxx/xxx', config)
            if (code === 1001) commit('MODEL_B', data)
        } catch(error) { console.log(error) }
    }
}

VueX模块化之后？