简单介绍一下Vuex

vuex主要应用于Vue.js中管理数据状态的一个库，通过创建一个集中的数据存储，供程序中所有的组件访问；
当我们开发一些中大型的项目或者说数据量比较大时，就会想起vuex,下面就用一个购物车添加商品的例子来了解一下vuex:
实现效果如下图：在一个子组件中操作商品的添加，商品数量的加减，商品删除，另一个子组件中的数据也实时更新

屏幕快照 2018-10-31 下午5.16.48.png

1、安装：npm install vuex --save
2、引用vuex，创建store实例：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
  // 注意 Vuex.Store中的S要大写
)}

3、部分Vuex实现代码

export const store = new Vuex.Store({
    // 单一状态树  设置属性
    state:{
      // 商品数组
        goodsList:[]
    },
    // 获取属性
    getters:{
        // 获取商品列表
        getterGoodsList(state){
            return state.goodsList;
        },
        // 获取所有商品的总价
        getterGoodsTotalPrice(state){
            var total = 0
            for (const key in state.goodsList) {
                if (state.goodsList.hasOwnProperty(key)) {
                    const element = state.goodsList[key];
                    total = total + parseFloat(element.total)
                }
            }
            return total
        }
    },
    // 改变数据状态
    mutations:{
        // 将新的商品添加到商品数组
        addGoodsToGoodsList(state,goods){
            state.goodsList.splice(0,0,goods);
        },
        // 修改选中商品的数量
        changeGoodsCount(state,payload){
            state.goodsList.forEach(element => {
                if (element.goodsId == payload.goodsId) {
                    element.count = parseInt(element.count) + parseInt(payload.count);
                    element.total = parseInt(element.count) * parseFloat(element.price);
                }
            })
        },
        // 根据商品id删除选中的商品
        deleteGoodsToGoodsList(state,item){
           state.goodsList.splice(state.goodsList.indexOf(item),1)
        }
    }
})

4、添加到购车

    addGoodsToCartAction() {
      if (this.name && this.price && this.count) {
        let goods = {
          name: this.name,
          price: this.price,
          count: this.count,
          total: this.count * this.price,
          goodsId: new Date().getTime()
        };
        this.$store.commit("addGoodsToGoodsList", goods);
        this.name = "";
        this.price = "";
        this.count = "";
      }
    }

4、减少商品数量

    reduceGoodsCount(goodsId) {
      let payload = {
        goodsId: goodsId,
        count: -1
      };
      this.$store.commit("changeGoodsCount", payload);
    }

5、增加商品数量

addGoddsCount(goodsId) {
      let payload = {
        goodsId: goodsId,
        count: 1
      };
      this.$store.commit("changeGoodsCount", payload);
    }

具体代码详见：https://github.com/zzsuyifeng/vuexDemo/tree/vuex