项目笔记23（尚品汇）

购物车操作

发送请求

当用户点击加入购物车时，应该将用户的数据存储到数据库中。

首先通过手册查看接口文档，发现接口为/api/cart/addToCart/{skuId}/{skuNum} POST请求。接下来去api文件夹下的index.js文件发送请求

发送请求完成之后，去vuex中的detail仓库设置actions如下所示，此处不需要存储数据，因为没有接收数据。

接下来回到详情页的加入购物查按钮，绑定点击事件，派发action并且传递所需参数。

根据请求成功与否决定是否进行路由跳转

注册添加到购物车页面的路由

首先将准备好的添加购物车页面的静态组件导入到项目中，然后再router文件夹中设置路由，具体设置如下所示。

判断是否跳转

设置完成之后，重新修改detail仓库中的action，当请求成功，返回ok，请求失败，返回错误。

然后回到detail组件利用try catch来根据成功与否决定是否跳转。具体代码如下所示

将详情页的信息带给添加到购物车路由并替换数据

需要给加入购物车组件传递商品信息以及商品数量。针对简单的商品数量这个数据，使用简单的query就可以进行存储。而复杂的产品信息（是一个对象）那么可以利用会话存储（ 不持久，会话结束就消失 ）。需要注意的是本地存储，会话存储存储的一般都是字符串，具体操作及代码如下所示

存储完成后，回到添加到购物车组件，接收数据。

购物车静态组件与添加到购物车组件修改

添加到购物车组件还有两个地方需要修改。如图所示，点击这两个按钮同样会进行路由跳转。

点击商品详情的跳转较为简单。具体代码如下所示。


而去购物车结算的跳转就相对麻烦一点，首先得先去之前写好的代码中拿到购物车的静态组件引入到项目中。

引入完成之后，同样注册路由

注册完成之后，给第二个按钮设置路由跳转

uuid游客身份获取购物车数据

首先书写获取购物车的数据的接口

接下来由于是个新模块所以建立一个新的仓库名为shopcart

仓库完成之后，开始vuex三连环，在三连环之前，先测试一下拿到的数据


得到的数据如下所示

可以发现没有拿到数据，这是因为服务器不知道给你谁的数据。假设用户很多，那么根据用户的不同返回的应该是不同的数据。为了方便演示这个效果，引入uuid。

封装一个固定的uuid

储存在detail仓库中。

接下来找到api文件夹下的request.js文件。利用请求头传递数据

购物车动态展示数据

动态展示数据

处理总价和全选按钮

处理产品数量

与上次产品数量处理不同的是，上次的产品数量处理不需要发送请求，在这里需要发送请求。