vuex中modules可以將項目state進行分塊，互補干擾。那么在單個module中，action如何調用其他module中action或者根action/mutation/state？
打印action參數：
const actions={
editName(options,payload){
console.log(options)
}
}
運行editName方法，打印結果：
commit 用於調用mutation，當前模塊和其他模塊；
dispatch 用於調用action，當前模塊和其他模塊；
getters 用於獲取當前模塊getter；
state 用於獲取當前模塊state；
rootState 用於獲取其它模塊state；
rootGetters 用於獲取其他模塊getter；
rootGetters
const actions={
editName({rootGetters},payload){
console.log(rootGetters)
}
}
運行editName:
可以得到，根getters與其他模塊getters：Home命名空間下的word
rootState
const actions={
editName({rootState},payload){
console.log(rootState)
}
}
運行editName,結果：
得到根state下time值以及其它module下的state。
getters
const getters={
word:state=>`My name is ${state.username}`
}
const actions={
editName({getters},payload){
console.log(getters)
}
}
運行editName，結果：
只會得到當前模塊下getters
state
const state={
username:'wbiokr',
sex:'man'
}
const actions={
editName({state},payload){
console.log(state)
}
}
運行editName，結果：
只會得到當前模塊下state
dispatch
const actions={
editName({dispatch},payload){
dispatch('log')
},
log(){
console.log(123)
}
}
此時運行editName，會運行當前模塊下log方法，故結果打印出123。
如果在根空間下定義一個log方法，通過dispatch去調用，則可以通過root參數：
const actions={
editName({dispatch},payload){
dispatch('log',{txt:'hello world'},{root:true})
},
log(){
console.log(123)
}
}
//根空間
actions:{
log({},{txt}){
console.log(txt)
}
}
此時運行editName方法適合，則打印出hello world；
commit
commit回去觸發mutation更新state，如：
const state={
username:'wbiokr',
sex:'man'
}
const actions={
editName({commit,state},payload){
commit('editName','newName')
console.log(state)
}
}
運行editName，結果：
如果想觸發其他模塊的mutation動態更新state，則需要借助參數root：
根模塊index.js
import Home from './modules/home'
import About from './modules/about'
export default {
modules:{
Home,
About,
},
state:{
time:new Date().getTime()
},
getters:{
getFullYear:state=> new Date(state.time).getFullYear()
},
mutations:{
updateTime(state,payload){
state.time=payload.time
}
},
actions:{
updateTime({commit},payload){
commit('updateTime',payload)
},
log({},{txt}){
console.log(txt)
}
},
}
模塊about.js
const state={
componey:'one',
}
const mutations={
changeComponey(state,n){
state.componey=n
}
}
const actions={
editName(options,payload){
console.log(options)
}
}
export default {
namespaced:true,
state,
mutations,
actions,
}
模塊home.js
const state={
username:'wbiokr',
sex:'man'
}
const getters={
word:state=>`My name is ${state.username}`
}
const mutations={
editName(state,n){
state.username=n
}
}
const actions={
editName({commit,rootState},payload){
commit('About/changeComponey','newComponey',{root:true}) //此處是重點
console.log(rootState.About)
}
}
export default {
namespaced:true,
state,
getters,
mutations,
actions,
}
運行editName方法，結果：