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