[JavaScript知识库]vue中如何为购物车添加同种商品

不用找了，这个博客就可以解决你的问题

先介绍一下Vue添加商品到购物车的逻辑

• 用户浏览商品列表
• 用户点击了某一个商品
• 在程序中，拿到用户点击商品的有关信息（id等）
• 将该商品的信息 push 到存放商品的数组对象 goodsList 中
• 在购物车中循环渲染出来
• 到这里，添加购物车的大致流程便搞定了

可假如说，我们要添加同种商品进去，该怎么做？

解释：这句话可能不好理解，嗯~，举个例子吧。
就比如，假如一个商家打算购进100部手机，其中，80部是256G内存的，20部是 128G内存的。
这个时候，就要求我们push进去两条同一种手机的记录，而后去修改购进手机的参数，其中第一条手机记录，修改数量为80部，内存为256G，另一条手机记录修改数量为20，内存为128G。
如果我们只能添加一条手机购物车记录，显然是无法分别修改
只有添加两条同种手机购物车记录，然后分别修改数量和内存，如此才满足要求

有疑问的朋友肯定是遇到了这样的问题：当我们push进去了两个同种商品，但两个商品却保持着高度的同步，这个商品数量变了，另一个也变了，把这个删了，另一个也没了。

这是因为，我们添加商品，其实是将描述商品有关信息的一个对象添加到购物车数组中，本质上是引用了该对象的地址添加到数组（地址引用），而也就是这样，才导致我们的数据发生了联动。

那么，我们当下的核心，便是将 地址引用 改为 值引用。其实方法很简单，只需要将商品数据对象做一份深拷贝，再添加进购物车数组即可

方法有很多，这里分享一下我使用的方式

// item 为要添加到购物车数组 goodsList 的对象
// 在添加前，进行一份深拷贝，实现值引用，而非地址引用
this.goodsList.push(JSON.parse(JSON.stringify(item)))

更多方式

这个时候，你就会神奇的发现，我们添加进去的同种商品，不再保持高同步的联动了，问题解决，赶紧去试试吧~

有关删除商品的补充：

删除购物车商品一般是通过查找 id 移除数据来实现的，但是我们添加的同种商品的 id 都是一样的，所以删除的时候，会出现点击删除一个商品，另一个同种商品同时被删除的现象发生！

解决方法很简单，我们为添加到购物车的商品再新添加一个假id属性，这个假id我们使用时间戳来赋值。

直接上代码了！

// 通过 $set 通知组件，我添加了一个名叫 fake_id 的属性
this.$set(item, 'fake_id', parseInt(new Date().getTime()))
this.goodsList.push(JSON.parse(JSON.stringify(item)))

然后我们在进行删除的时候，只需要操作 fake_id ，就可以正常的实现删除了！

问题解决了的哈，记得回来点赞哦~