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']

作者：鱼玉玉玉玉
链接：https://www.jianshu.com/p/5c467a3e1ca9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。