vuex 模块化之后如何调用其他模块的方法和属性

vuex的使用场景

多处需要更改同一个数据时,需要使用vuex

举个例子:购物车商品数量,在商品列表页面添加商品会更改这个值,在详情页增减商品数量会更改这个值,进入购物车删除商品也会更改这个值,通过提交mutation来更改这个值就很简单明了,如果每次都调用获取购物车数量的接口(前提得有),也能实现,但是每一次的HTTP请求,都是对浏览器性能消耗。

跨组件共享数据、跨页面共享数据

比如loading状态,在很多页面都需要使用

vuex 模块化后如何调用其他模块的属性和方法

actions:{
    getListData(context,payload){
      console.log(context);
    },
}

打印 action 的第一个参数

  • commit 用于调用mutation,当前模块和其他模块;
  • dispatch 用于调用action,当前模块和其他模块;
  • getters 用于获取当前模块getter;
  • state 用于获取当前模块state;
  • rootState 用于获取其它模块state;
  • rootGetters 用于获取其他模块getter;

在一个模块的actions中调用其他模块的actions

dispatch('vip/get', {}, {root: true}) 

参数一:是其他模块的 actions 路径,。
参数二:是传给 actions 的数据, 如果不需要传数据, 也必须预留,
参数三:是配置选项, 申明这个 acitons 不是当前模块的

在一个模块如果想触发其他模块的mutation动态更新state

 commit('vip/receive', data, {root: true})

参数一:其他模块的 mutations 路径
参数二:传给 mutations 的数据, 如果不需要传数据, 也必须预留,
参数三:第三个参数是配置选项, 申明这个 mutations 不是当前模块的

在一个模块需要使用其他模块的getters

rootGetters['vip/get']

在一个模块需要使用其他模块的state

rootState['vip/data']
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 7,985评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 8,296评论 0 6
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 12,439评论 4 111
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 10,098评论 7 61
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 6,081评论 3 3