Vue项目的记录（十二）

Vue项目的记录（十二） Fantastick 于2022-10-17 23:22:53发布 600 收藏 8 分类专栏： vue项目篇 文章标签： vue.js javascript 前端 vue项目篇 专栏收录该内容 10 篇文章 0 订阅 订阅专栏 购物车的操作 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 删除： 整个过程里会发生一个这样的错误 解决办法：