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