vuex模块化,如何相互调用(mutations,actions,getters)
先写好两个模块A模块const ceshi1 = {namespaced: true,state: {title:'我是测试1State数据'},mutations: {},actions: {}};export default ceshi1;B模块const ceshi2 = {namespaced: true,state: {title: '我是测试2Sta
先写好两个模块
A模块
const ceshi1 = {
namespaced: true,
state: {
title:'我是测试1State数据'
},
mutations: {
},
actions: {}
};
export default ceshi1;
B模块
const ceshi2 = {
namespaced: true,
state: {
title: '我是测试2State数据'
},
mutations: {
},
actions: {
}
};
export default ceshi2;
1.A模块如何使用B模块中的state值
`
模块A
const ceshi1 = {
namespaced: true,
state: {
title:'我是测试1State数据'
},
mutations: {
},
actions: {}
};
export default ceshi1;`
模块B
const ceshi2 = {
namespaced: true,
state: {
title: '我是测试2State数据'
},
mutations: {
},
actions: {
hanleChange({
state,
commit,
dispatch,
rootState,
}){
console.log(rootState.ceshi1.title)
},
}
};
export default ceshi2;
打印结果
2.模块A如何调用模块B中的mutations方法
A模块
const ceshi1 = {
namespaced: true,
state: {
title:'我是测试1State数据'
},
mutations: {
aaa(state,{val}){
console.log('我是测试1模块的aaa函数')
console.log(val)
},
},
actions: {}
};
export default ceshi1;
B模块
const ceshi2 = {
namespaced: true,
state: {
title: '我是测试2State数据'
},
mutations: {
},
actions: {
hanleChange({
state,
commit,
dispatch,
rootState,
}){
commit('ceshi1/aaa',{val:'我是val值'},{root:true})
},
}
};
export default ceshi2;
打印结果
3.模块A如何调用模块B的actions
A模块
const ceshi1 = {
namespaced: true,
state: {
title:'我是测试1State数据'
},
mutations: {
},
actions: {
aaa({state},{val}){
console.log('我是测试1模块actions的aaa函数')
console.log(val)
},
}
};
export default ceshi1;
B模块
const ceshi2 = {
namespaced: true,
state: {
title: '我是测试2State数据'
},
mutations: {
},
actions: {
hanleChange({
state,
commit,
dispatch,
rootState,
}){
dispatch('ceshi1/aaa',{val:'我是val值'},{root:true})
},
}
};
export default ceshi2;
打印结果
4.模块A如何调用模块B中的
A模块
const ceshi1 = {
namespaced: true,
state: {
title:'我是测试1State数据'
},
mutations: {
},
actions: {
},
getters: {
aaa(state){
return '我是ceshi1模块getters里面的aaa'
},
}
};
export default ceshi1;
B模块
const ceshi2 = {
namespaced: true,
state: {
title: '我是测试2State数据'
},
mutations: {
},
actions: {
hanleChange({
state,
commit,
dispatch,
rootState,
rootGetters
}) {
console.log(rootGetters['ceshi1/aaa'])
},
}
};
export default ceshi2;
打印结果
5总结
一.rootState //可以获取到别的模块中的state
用法: rootState.ceshi1.title
注意:要先结构出来
二.commit //可以获取当面模块的 mutations方法,也可以获取到别的模块的 mutations方法
用法
1.commit(xxx,{}) //获取当前模块的方法,第一个参数为方法名,第二个为 传的值
2.commit(xxx/bbb,{},{root:true}) //获取其它模块的方法,第一个参数为方法名,第二个为传的值,第三个root值为true,这样才能找到该方法
三.dispatch //可以获取当面模块的 actions方法,也可以获取到别的模块的actions方法
用法
1.dispatch(xxx,{}) //获取当前模块的方法,第一个参数为方法名,第二个为 传的值
2.dispatch(xxx/bbb,{},{root:true}) //获取其它模块的方法,第一个参数为方法名,第二个为传的值,第三个root值为true,这样才能找到该方法
四.rootGetters
用法
rootGetters[‘ceshi1/aaa’] //获取别的模块getters方法
更多推荐
所有评论(0)