Vue简单实现购物车全部功能

Vue简单实现购物车功能

本文用Vue简单实现了一下购物车功能，简单是指代码简单，只有50行，也指样式简单，愧对前端。话不多说，直接上图上代码吧！

这是购物车的页面，虽然看着比较简陋，但麻雀虽小五脏俱全，数据用的是在state里面的固定数据。

先捋一下购物车的逻辑：

1、在选中该商品的时候，总价变为该商品的价格。

2、点击”+“或 ” - “的时候，商品的数量随之变化，总价也跟着变化。

3、当点击全选的时候，全部商品选中，总价变为如今商品价格*商品数量之和，取消全选的时候，价格变为0。

4、点击删除的时候，该商品从列表中被删除，如果该商品被选中的情况下，总价随之而变。

大致的逻辑便是这四个，那我们先来实现第一个功能，在选中的时候，总价随着商品而改变。

先看商品代码和store里面的state结构代码

先来实现第一个功能：选中的时候，总价发生改变

由页面点击时传出来一个索引值，这里用payload接收一下，并且判断这个input是否被选中，如果被选中的情况下，便让总价的值等于选中的商品价格*商品的数量。

这里多加了一个判断，当所有的商品都选中的时候，让全选的状态变为选中，这里用到了every函数

第二个功能  增加和减少：

同样是先接收索引值，修改点击的商品数量。不要陷入思维误区，在点 “+” 的时候直接让总价加上该商品的单价就可以了，不需要再麻烦的重新去调用总价的函数，商品的数量也加1就可了。

同理，点击 “ - ” 也是一样的，只不过减号要多加一个判断，在数值等于1的时候，就不能再继续减下去了。

 

第三个功能  全选和非全选：

先让总价等于0，防止全选的时候和上一次选择发生叠加，如果使全选的状态，让当前所有商品的数量*对应商品的价格，

如果不是全选的状态，则让所有的商品取消选中状态，让总价变为0即可。

 

第四个功能  删除商品：

同样是接收传回的索引值，用splice的方法来替换点击的商品，用v-show，让该商品不显示并且取消选中状态，同时让总价变为0，再重新计算一下所有被选中的商品总价即可。

用这个方法的原因是为了保证原有数组的索引值不变，不会出现错乱的状态，可以试下如果直接从数组里面删除该数值的话，总价和数量是会出现错乱的。

这样购物车的功能便基本上全部实现了。

有发现不足的地方，欢迎各位源友指正，有更好的方法，也欢迎分享。