1.mapState
state的mapState的辅助函数主要是为了解决
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。
例如当我在store.js中的state对象里面声明了以下几个属性
const store = new Vuex.Store({
state: {
orderItem: [], //订单的食物列表
orderFee: 0, //配送费
orderNum: 0, //食物数量
orderPrice: 0, //总的价格
minPrice: 0, //起送价格
cartList: [], //购物车中的商品
addressList: [], //地址集合
chooseAddress: [] //选择的地址
}
});
export default store
我如果要在一个其他的vue中使用到这个state里面的orderfee和orderNum以及orderPrice,那我就需要在computed的函数里面这样去声明
computed: {
bagnums() {
return this.$store.state.orderNum;
},
shopPrice() {
return this.$store.state.orderPrice;
},
orderFee() {
return this.$store.state.orderfee;
}
}
然后在页面当中去显示
eg
<el-badge :value="bagnums" :max="99" class="item">
<i class="el-icon-goods"></i>
</el-badge>
但是这样一个个的去声明,有点太麻烦了。所以vuex中给我们增加了一个state的辅助函数mapState
我们只需要在vue中引入这个辅助函数,在computed函数中直接使用就可以了
import {mapState} from 'vuex'
computed: {
...mapstate([
'bagnums','shopPrice','orderFee'
])
}
然后页面中去显示
<el-badge :value="bagnums" :max="99" class="item">
<i class="el-icon-goods"></i>
</el-badge>
方法中去操作
mounted() {
this.addorder = this.shopPrice;
//相当于this.addorder = this.$store.state.shopPirce
//mapState通过扩展运算符将store.state.shopPirce 映射this.shopPrice 这个this 很重要,这个映射直接映射到当前Vue的this对象上。
所以通过this都能将这些对象点出来,同理,mapActions, mapMutations都是一样的道理。牢记~~~
}
2.mapMutations
state的状态属性只能通过mapMutations来进行提交。
commit:提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。
使用commit来提交
//加入购物车并且算价格
//用mapState通过$store.commit来触发mutation
addPrice(price, food_id, name) {
this.foodId = food_id;
this.$store.commit('addPrice', { price: price, id: food_id, name: name });
this.sPrice = this.$store.state.minPrice - this.$store.state.orderPrice;
},
使用mapMutaitions来进行提交
import { mapMutations, mapState } from 'vuex'
computed: {
...mapState([
'minPrice','orderPrice'
])
}
methods(){
...mapMutations([
'addPrice' //映射在方法中的this.addPrice 相当于 this.$store.commit('addPrice')
])
//加入购物车并且算价格
//用mapMutation中的this.addPrice来触发mutation
addPrices(price, food_id, name){
this.foodId = food_id;
this.addPrice({price: price, id:food_id, name: name});
this.sPrice = this.minPrice- this.orderPrice
}
}
3.mapActions
action 类似于 mutation,不同在于:
action 提交的是 mutation,而不是直接变更状态。
action 可以包含任意异步操作。
mapActions的用法类似于mapMutations的用法
我们可以在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):
//使用dispatch来触发action
//从购物车减少并算价格
desPrice(price, food_id, name) {
this.$store.dispatch('adesPrice', { price: price, id: food_id, name: name });
},
//使用mapActions来触发action操作
import { mapMutations, mapState, mapActions } from 'vuex'
methods:{
...mapActions([
'adesPrice' //映射在方法中的this.adesPrice 相当于 this.$store.dispatch('desPrice')
]),
desPrice(price, food_id, name) {
this.adesPrice({ price: price, id: food_id, name: name });
},
}
store.js中的action的方法
actions: {
adesPrice(context, cartArr) {
context.commit('desPrice', cartArr);
}
}
Vuex总结(三)
最新推荐文章于 2024-05-15 08:56:02 发布