Vuex各模块互相调用


每一个action都会存在两个参数

1
2
3
4
5
const action = {
actionFunction(store, data) {
console.log(store)
}
}

第一个参数store中存在如下几个属性:

  • commit 用于调用mutation,当前模块和其他模块
  • dispatch 用于调用action,当前模块和其他模块
  • getters 用于获取当前模块getter
  • state 用于获取当前模块state
  • rootState 用于获取其它模块state
  • rootGetters 用于获取其他模块getter

根据属性,调用方法如下(以下方法默认store的各属性已直接获得)

在某模块 action 中获取 chat 模块的名为 webSocketClient 的 state:

1
2
3
rootState.chat.webSocketClient
// 或者
rootState['chat'].webSocketClient

在某模块 action 中获取 chat 模块的名为 getDate 的 getter:

1
2
3
rootGetters.chat.getDate
// 或者
rootGetters['chat'].getDate

在某模块 action 中调用 chat 模块的名为 GET_DATE 的 mutation:

1
commit('chat/GET_DATE', null, {root: true}) 
  • 参数1:其他模块的 mutation 路径
  • 参数2:传给 mutation 的数据, 即使不需要传数据,也必须要预留
  • 参数3:配置选项, 表明这个 mutation 不是当前模块的

在某模块 action 中调用 chat 模块的名为 get 的 action :

1
dispatch('chat/get', null, {root: true}) 
  • 参数1:其他模块的 actions 路径
  • 参数2:传给 actions 的数据, 即使不需要传数据,也必须要预留
  • 参数3:配置选项, 表明这个 acitons 不是当前模块的