本案例利用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配置:
在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐