vuex中modules中action如何调用state、兄弟模块state、根state,以及调用相关action、mutation,getters?vuex中modules中action如何调用s
如何调用state、兄弟模块state、根state
·
vuex模块化
- 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 可以得到,根getters与其他模块getters:Home命名空间下的word
const actions={
editName({rootGetters},payload){
console.log(rootGetters)
}
}
运行editName:
rootState 得到根state下time值以及其它module下的state。
const actions={
editName({rootState},payload){
console.log(rootState)
}
}
运行editName,结果:
得到根state下time值以及其它module下的state。
getters 只会得到当前模块下getters
const getters={
word:state=>`My name is ${state.username}`
}
const actions={
editName({getters},payload){
console.log(getters)
}
}
运行editName,结果:
state 只会得到当前模块下state
const state={
username:'wbiokr',
sex:'man'
}
const actions={
editName({state},payload){
console.log(state)
}
}
dispatch 用于调用action,当前模块和其他模块;
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,当前模块和其他模块;
commit回去触发mutation更新state,如:
const state={
username:'wbiokr',
sex:'man'
}
const actions={
editName({commit,state},payload){
commit('editName','newName')
console.log(state)
}
}
如果想触发其他模块的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,
}
更多推荐
已为社区贡献19条内容
所有评论(0)