vuex-跨模块访问

1. 场景

案例:跨模块访问和退出登录

假设我们有一个Vuex store,其中包含user模块和cart模块。当用户点击退出登录按钮时,我们需要调用user模块中的方法来清除用户信息,同时还需要清除cart模块中的购物车数据。

2. 实现-跨模块访问

参考官网:在带命名空间的模块内访问全局内容(Global Assets)

  1. 首先,我们需要在Vuex store中定义user模块和cart模块
    vuex-跨模块访问_第1张图片

  2. 在user.js中调用cart.js中的方法

 actions: {
    logout (context) {
      // 清空个人信息
      context.commit('updateUserInfo', {})
      // 清空购物车信息
      context.commit('cart/setCartList', [], { root: true })
    }
  },

注:参考官网解释

  1. 如果你希望使用全局 state 和 getter,rootStaterootGetters 会作为第三和第四参数传入 getter,也会通过 context 对象的属性传入 action。

  2. 若需要在全局命名空间内分发 action 或提交 mutation,将 { root: true } 作为第三参数传给 dispatchcommit 即可。

你可能感兴趣的:(Vue2,vue.js,前端,vuex)