vue---vuex中modules中action如何调用state、兄弟模块state、根state,以及调用相关action、mutation,getters?

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方法,结果:
这里写图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值