使用Vuex实现购物车

Vuex是一个应用状态管理库。当涉及大量状态需要多个组件共享时，可以采用Vuex。当进行一些小项目开发时，涉及组件传值时，或者项目非常小，组件间共享状态不多的情况下，此时可以使用简单的store模式或者其它方式。

在一些中大型单页应用程序中，需要解决多个视图依赖同一状态，来自不同视图的行为需要变更同一状态的问题，所有满足这两个条件的项目和业务，建议使用Vuex进行状态管理。

典型的购物车案例，涉及多个子组件依赖同一个状态和来自不同视图的一些行为需要改变同一个状态值。此案例主要实现商品列表的显示，主要有增加和删除商品、增加和减少商品数量、实时显示购物车里面总的商品数量和总价格。

使用时，需要将商品列表组件Product.vue和购物车列表组件Cart.vue在App.vue中引入，并在Vuex的store文件夹下的cart.js中定义好商品数据 all_products和已添加到购物车的商品数据selected，然后将该模块放入index.js文件的modules对象中，将数据通过getters导出，将方法通过actions和mutations导出。

cart.js文件代码如下：

// store/cart.js
//所有购物车共享数据
const state={
    //商品数据
   all_products: [
       { id：1，name: '电视',price: 5000},
       { id：2，name: '冰箱',price: 8000},
       { id：3，name: '平板',price: 6000},
       { id：4，name: '手机',price: 1500},
       { id：5，name: '耳机,price: 120},
   ],
   //已选的商品数据
   selected: []
}

//将数据导出
const getters={
   //商品数据
   products: state=>state.all_products,
  //购物车中数据
  cartProducts: state=>{
      return state.selected.map(item=>{
          let curProducts=state.all_products.find(i=>i.id===item.id);
          let count=item.count;
          return {
               ...curProducts,count
           }
       })
    },
  //总价
  totalPrice: (state,getters)=>{
       let total=0;
       getters.cartProducts.forEach(item=>{
            total+=item.price*item.count;
       });