本文共 424 字，大约阅读时间需要 1 分钟。

总结一下vue添加收藏取消收藏功能

最近做这个商城项目，就有很多比较重要的知识点，除了购物车，还有提交订单选择地址，使用优惠券等，以及我要说的这个添加收藏的功能； 话不多说。上图： 未收藏： 已收藏： 逻辑为，在进入商品详情页之前，所要展示的数据应该带有id，和status（Boolean）状态，id确保进入详情页展示这个商品，status用于控制收藏的状态。

在点击收藏的时候两步操作，

1，向我的收藏collection.js中插入这个数据，用于在我的收藏处展示。 2，向原来的商品数据列表，传递id和状态，改变商品列表中的商品状态，用来保证即使退出，再回来，这个商品依然是已经收藏的状态。 3，还有重要的部分。

例如，进入详情页的时候，在created中先拿到这个数据，重在这个数据的状态值用于控制收藏按钮的状态。当点击的时候，让这个状态变为true，。并且需要在beforeDestroy中传递新的数据回去到商品列表，也可能这一步是多余的

转载地址：http://zcgwz.baihongyu.com/