Vue项目--尚品汇（购物车页面的一些操作（修改数量，勾选，删除等））_vue的购物车勾选取消勾选怎么写

1.用户身份识别--uuid、本地存储

在src文件夹里新建utils文件夹，创建uuid_token.js用于存储用户的身份标识（游客）。第一次本地存储中没有身份码，使用uuidv4()函数生成，并存储于本地。以后直接在本地存储中获取。

2.在store文件夹中的ShopCart文件中的state，用getUUID()获取用户身份识别码，存储到uuid_token里。

3.修改请求拦截器，将用户身份传递给服务器（给请求头加一个字段）

 将获取到的数据动态展示到ShopCart组件中。

4.可以在购物车里修改某个产品的购买量

 当点击+或者-按钮@click，或者输入input的数量改变@change的时候触发handler事件

 根据点击target不同，给服务器的参数不同 

 数据库中的数据修改，但是网页内容没改变，需要重新发请求获取数据显示。

如果用户点击减少商品个数按钮-速度过快，会导致请求服务来不及，会出现购买数为负，所以要为handler事件添加节流控制 。将以上代码包在throttle函数中。注意async的位置，在里面。

 5.在购物车中删除某个商品

也需要像服务器发请求，请求的方式是Delete，需要传产品id。 

store的action中添加： 

 接口配置：

 6.勾选/取消勾选某个产品

调接口，请求方式为get，参数为产品id和勾选状态，返回的data为null

复选框勾选状态改变事件的处理：

7.删除选中商品

可以通过context.dispatch调用同级的action函数。

遍历getter数据，为checked为真的数据调用一次删除操作。将删除操作返回的promise存储到promiseALL 数组中，便于用Promise.all([])函数判断所有删除操作是否全部成功。

actions:

 点击‘删除选中商品’按钮，触发以下操作：

注意删除完以后需要再次发请求获取最新数据存储到仓库中。

 8.全选按钮，将所有未选中的商品勾选（同上，需要判断是否勾选，未勾选的向服务器发请求）

需要注意购物车为空的时候，默认取消勾选