1. 场景
案例:跨模块访问和退出登录
假设我们有一个Vuex store,其中包含user模块和cart模块。当用户点击退出登录按钮时,我们需要调用user模块中的方法来清除用户信息,同时还需要清除cart模块中的购物车数据。
2. 实现-跨模块访问
参考官网:在带命名空间的模块内访问全局内容(Global Assets)
-
首先,我们需要在Vuex store中定义user模块和cart模块
-
在user.js中调用cart.js中的方法
actions: {
logout (context) {
// 清空个人信息
context.commit('updateUserInfo', {})
// 清空购物车信息
context.commit('cart/setCartList', [], { root: true })
}
},
注:参考官网解释
如果你希望使用全局 state 和 getter,
rootState
和rootGetters
会作为第三和第四参数传入 getter,也会通过context
对象的属性传入 action。若需要在全局命名空间内分发 action 或提交 mutation,将
{ root: true }
作为第三参数传给dispatch
或commit
即可。