电商前台项目（五）：完成加入购物车功能和购物车页面

一、加入购物车

1.路由跳转前先发请求把商品数据给服务器

（1）观察接口文档

这里其实只需要把已有物品的id和数量传给后台，但是后台不需要返回数据

（2）写接口

点击加入购物车之后要把商品的id和数量传给服务器（数据库的增操作）

src/api/index.js
6.添加到购物车的接口(对已有物品进行数量改动)
地址：/api/cart/addToCart/{
    skuId }/{
    skuNum }  post  参数skuId和skuNum
这个请求只需要给服务器发数据，不需要返回什么东西

export const reqShopCarMsg = (skuId, skuNum) => {
   
    return requests.post(`/cart/addToCart/${
     skuId}/${
     skuNum}`);
}

（3）dispatch调用接口传数据

1、给加入购物车按钮添加点击事件

2、派送actions，然后把数据以对象的形式传过去，第一个键值对是商品id（当从Search到Detail路由跳转时就传过来的params参数），第二个键值对是购物车数量（我们已经存到了Detail组件的data里）

3、actions这边通过解构赋值，调用接口并把数据传给服务器（后端数据库）

actions: {
   
        .....
        
        加入购物车
        异步请求，把商品id和数量发送给服务器，参数解构赋值并自己起了个名
        
        async sendShopCarMsg(context, {
     skuId: id, skuNum: num }) {
   
            let result = await reqShopCarMsg(id, num);
            //这里只是把购物车数据给服务器，但是服务器不需要返回什么东西
            //所以这里我们不用再三连环了，通过dispatch把数据给服务器就已经欧了
            console.log(result);
        }
    },

（4）判断服务器是否已经收到商品数据

这里要判断请求是否已经成功，也就是服务器是否收到了要加入购物车商品的数据，若成功了就要进行路由跳转并传参，若失败了就要给用户提示。

dispatch就会调用这个actions里的函数，调用这个async函数返回一个promise对象，这个Promise对象的状态和结果值取决于这个async函数的返回值。

1、如果返回一个非Promise对象，那么就是成功，值就是返回值；
2、如果返回Promise对象，那么状态和结果值取决于该Promise
3、如果不写返回值，且await后是失败的Promise，那么就会抛出异常，既然抛出异常，那么async函数返回的就是一个失败的Promise。
4、如果不写返回值，且await后是成功的Promise，那么就会返回undefined，async函数返回的就是一个成功的Promise，值是undefined。

如果忘了，去复习Promise：关于Promise的使用和源码

 actions: {
   
        ....
        调用async函数返回一个promise对象
        //加入购物车
        //异步请求，把商品id和数量发送给服务器，参数解构赋值并自己起名
        async sendShopCarMsg(context, {
     skuId: id, skuNum: num }) {
   
           //其实这里不用try-catch,因为那边已经try了,不写return默认返回undefined(成功的Primise)
           //如果await后成功则返回undefined(没写return,返回成功的Promise)
           //如果失败则抛出异常（返回失败的Promise）
            let result = await reqShopCarMsg(id, num);
            //这里只是把购物车数据给服务器，但是服务器不需要返回什么东西
            //所以这里我们不用再三连环了，通过dispatch把数据给服务器就已经欧了
            console.log('zzy',result);
        }
    },

那么这样的话其实就可以使用try-catch来捕获这个返回结果，大概的逻辑是这样的：

//函数3：点击加入购物车把商品数据传给后台服务器的数据库
async sendDataToSql() {
   
   //1.发请求，把购物车的商品id和数量传给数据库
   try {
   
     //2.请求成功，服务器已经存储了数据了，那么就要路由跳转并传参
     await this.$store.dispatch('detail/sendShopCarMsg', {
    skuId: this.$route.params.skuId, skuNum: this.shopCarNum })
     //路由跳转并传参
     // this.$router.push({
   
     //   name:''
     // })
   } catch (error) {
   
     //3.发送数据（请求）失败，给用户进行提示
     console.log('请求失败了baby', error.message);
   }
 }

2.请求成功后进行路由跳转

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。、

（1）创建路由并配置路由规则

1、所以我们先创建路由

2、配置路由规则src/router/routes.js

（2）路由跳转并传参（练习本地存储）

3、写路由跳转和传参的代码

这里要传两个值：skuInfo对象和商品数量shopCarNum（其实skuInfo根本不用传，直接去仓库读就行了）。传参的时候最好别用params和query，因为带过去的需要是skuInfo这个对象，那么对象传过去的话，地址栏可能会是乱码。这里采用的方案是：本地存储（忘了点这先复习ÿ