After Vuex modularity + namespace, how to call state, Actions, mutations, getters of other modules?

Because Vuex uses a single state tree, all the states of the application are contained in one large object. As the app grows, the Store becomes bloated. To solve this problem, Vuex allows us to divide stores into modules. Each module contains its own state, mutation, action, and getter. Then the problem comes, after modularity + namespace, the data is relatively independent, if you want to call the state, actions, mutations, getters of module B in module A, what should I do?Copy the code

A module is 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
}
Copy the code

Module 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
}
Copy the code

1. Suppose we need to use the state of module A in actions for module B?

const actions = { async ['get'](store, config = {}) { const { commit, dispatch, state, RootState} = store console.log(rootState) // print the rootState console.log(rootstate.model_a) // print the state of other modules 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) } } }Copy the code

If you look at the code above, the get method in actions, it takes two arguments, the first one is store, and the second one is the argument that’s passed to dispatch and store is an object that has four keys, Commit is used to call mutations, dispatch is used to call actions, state is the state of the current module, and rootState is the rootState, since the rootState can be obtained, = rootState = rootState = rootState = rootState = rootState = rootState

2. Suppose the actions of module B need to call the actions of module A?

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', Mutations Dispatch (' model_A /get', {}, {root: } catch(error) {console.log(error)}}}Copy the code

Dispatch (‘ model_A /get’, {}, {root: The first argument is the path of the other module’s actions. The second argument is the data to be passed to the actions. If the data is not needed, it must be reserved. Declare that the acitons are not for the current module

3. Suppose that actions of module B needs to call Mutations of module A, what should we do?

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', Mutations commit(' model_A/model_A ', data, {root: Mutations} catch(error) {console.log(error)}}}Copy the code

Commit (‘ model_A/model_A ‘, {}, {root: True}) is to call mutations of module A in module B, which has three parameters. The first parameter is the mutations path of other modules, and the second is the data transmitted to mutations. If the data is not needed, it must be reserved. The third parameter is the configuration option, saying that this mutations is not for the current module

4. Suppose we need to use getters from module A in the actions of module B?

const actions = { async ['get'](store, config = {}) { const { commit, dispatch, state, rootState, RootGetters} = store console.log(rootGetters['model_a/get']) // Print getters for other modules try {const {data: { code, data } } = await api.post('xxx/xxx', config) if (code === 1001) commit('MODEL_B', data) } catch(error) { console.log(error) } } }Copy the code