vuex实现购物车功能

页面布局：
采用了element-ui的表格对商品列表和购物车列表进行布局
1、商品列表

shopList数据：

//模拟商品列表数据
    shop_list: [{
      id: 11,
      name: '鱼香肉丝',
      price: 12,
    }, {
      id: 22,
      name: '宫保鸡丁',
      price: 14
    }, {
      id: 34,
      name: '土豆丝',
      price: 10
    }, {
      id: 47,
      name: '米饭',
      price: 2
    },{
      id: 49,
      name: '蚂蚁上树',
      price: 13
    },
    {
      id: 50,
      name: '腊肉炒蒜薹',
      price: 15
    }],

购物车列表

因为我们还没添加商品，所以购物车为空

现在用vuex编写功能函数
在store.js中
在state中：定义两个变量，分别是商品列表，购物车列表，购物车开始为空

在getters中
有四个计算变量，分别是商品列表，购物车列表、购物车商品总数量和总价格的实时更新

在mutations中：
addCart：如果商品已经添加过了就无须添加，只对其数量增加

在actions中：

完整代码
shop-list.vue页面

shop-cart.vue页面

App.vue