Vuex項目 ,使用module后， 如何調用其他模塊的 屬性值和方法？

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

https://www.cnblogs.com/yeziTesting/p/7182904.html

 

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

 

我們來看下上面的代碼, 相比之前的代碼, store 又多了一個鍵: rootGetters
rootGetters 就是 vuex 中所有的 getters, 你可以用 rootGetters['xxxxx'] 來取其他模塊的getters
————————————————
版權聲明：本文為CSDN博主「小學生999」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/baidu_31333625/article/details/80351638