Vuex总结（三）

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);
   }
}

转自博客：https://www.cnblogs.com/yesu/p/9071912.html