Vue前端实现购物车基本功能（Vuex）

本案例利用vuex + vant 实现购物车功能，概括有以下步骤：
1、mock模拟数据
2、利用veux操作商品的选中状态
3、全选与取消全选
4、动态reduce计算价格
5、结算取出商品id
6、利用manageStatus判断管理状态，管理删除商品
7、未删除商品的状态存储

演示网址：https://zhangyongwnag.github.io/ShoppingCart/dist/index.html#/ShoppingCart

操作演示：

具体步骤：

一、mock模拟数据：

1、下载mockjs

npm i npm i mockjs --save -dev

2、新建目录如下：

index.js：

json：

使用如下：

数据添加俩个字段：

二、利用veux操作商品的选中状态
1、利用manageStatus区别结算选中还是删除选中
2、getters判断全选
3、手动全选与未选择

添加方法：


判断是结算选中还是删除选中：

注意三层数据以上需要用Vue.set，否则dom不会渲染

三、getters计算全选：


手动全选与取消全选：

四、动态reduce计算价格：
利用reduce递归相加选中的商品价格：

五、结算取出商品id：

六、管理删除商品：
利用manageStatus判断管理状态，管理删除商品，以保留结算选中的商品状态。

1、首先获取删除选中的商品id：
2、过滤删除掉已选中的商品：

总结：
至此就完成了前端购物车的一系列操作
查看源码：https://github.com/zhangyongwnag/ShoppingCart

附vuex配置：