vuex的简单总结使用

State负责存储整个应用的状态数据，一般需要在使用的时候在跟节点注入store对象，后期就可以使用this.$store.state直接获取状态

辅助函数的使用

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