文章目录
前言
一、自述:
博客小白,刚接触vue不久,由于写作品需要京东购物车这个功能板块,所以,在这里分享一下自己的实现思路以及部分代码。希望能帮助到大家。
效果如下:
二、功能实现
实现购物车增加、减少、删除功能
首先,博主先说一下自己的思路:
1.当用户选中商品并点击添加的时候,我们获取当前商品的id,然后把改商品存到vuex中的shopCart这个数组中。
这里因为每个人写的不同,答主就不放自己的代码了。
2.当用户来到购物车界面,修改了改商品的数量的时候,我们需要判断,是否是重复添加此商品。如果是,那么,我们就把改商品数量增加。
代码:
在vuex中:
state: {
shopCart:[] //购物车商品
},
mutations: {
addToShopCar(state,goods){
// 点击+号添加商品
var flag = false; // 标记商品是否重复,默认不重复
state.shopCart.some(item =>