Vue项目的记录（十二）

购物车的操作

1. 加入购物车

先定义加入购物车的数量

根据逻辑来进行编写业务流程

对在表单输入不正常的情况进行处理，比如输入中文、小数等
event. target. value:获得输入值
用户输入进来的文本* 1如果非数字会变成NaN

2. 产品添加到购物车中，即服务器更新

在api的index.js中编写接口

在vuex中存入数据

发请求， 在点击加入购物车的时候，将产品加入数据库，要判断添加成功还是失败。
此处使用到Promise的知识。async函数必定返回一个Promise的状态，因此可根据返回的状态来判断是成功还是失败

3. 成功加入数据库购物车后，进行路由跳转（会话存储）

成功路由跳转与参数传递
将使用到HTML5新增的本地存储和会话存储
本地存储： 持久化 --5M
会话存储： 并非持久， 关闭窗口就无了
存储数据：

接受数据并使用

4. 购物车页面动态展示

获取购物车列表数据接口

数据仓库vuex
这里有个问题，你将数据存进去之后，服务器不知道是谁存的，所以当你提取的时候服务器就不知道应该给你返回什么数据


所以这里要用到uuid生成一个唯一识别码，并且不改变


在请求拦截器中 在请求头中添加一个字段

这样数据返回成功

动态展示数据：
1、获取购物车列表数据

续上图

2.接受并展示



一个数组方 .every()

5. 修改购物车产品数量

服务器修改完后， 需要重新获取一次数据，动态的展示添加或者减少的数量

删除某一产品数量 和 修改商品状态
接口：

vuex

删除：





整个过程里会发生一个这样的错误

解决办法：