② 尚品汇的前台开发笔记【尚硅谷】【Vue】_尚品汇购物车支付数据为空数组是为什么

八、加入购物车

点击 加入购物车 的时候，先发请求，把数据存储到服务器，然后再进行路由跳转

• 当点击 加入购物车 的时候，会跳转到 加入购物车成功的页面，到时候需要配置路由，进行路由跳转
  

路由跳转之前发请求

api—请求接口

//     src/api/index.js

// 将产品添加到购物车中（或者 更新某一个产品个数）
//   /api/cart/addToCart/{ skuId }/{ skuNum }  POST 带参数
export const reqAddOrUpdateShopCart = (skuId,skuNum)=>{
   
    return requests({
   url:`/cart/addToCart/${
     skuId}/${
     skuNum}`,method:'POST'})
}
1
2
3
4
5
6
7
8
9
10
11

将数据存储到服务器里

1. 派发actions，发请求

   //       src / pages / detail /index.vue
   
   <div class="add">
    <!-- 以前的路由跳转，从A路由跳转到B路由 -->
    <!-- 在这里路由跳转，进行路由跳转之前，需要发请求 把你购买的产品信息通过请求的形式通知服务器，服务器进行相应的存储 -->
         <a @click="addShopcar">加入购物车</a>
   </div>
   1
   2
   3
   4
   5
   6
   7

       // 加入购物车的回调函数
   addShopcar() {
        
         // 1. 发请求--将产品加入到数据库（通知服务器）
         //    服务器存储成功----进行路由跳转
         //    失败，给用户提示
        this.$store.dispatch( "detail/addOrUpdateShopCart",{
        skuId:this.$route.params.skuId,skuNum:this.skuNum});
   },
   1
   2
   3
   4
   5
   6
   7
   8
   9

加入购物车以后（发请求），前台将参数带给服务器

服务器写入数据成功，并没有返回其他的数据，只是返回code=200，代表这次成功

⚠ ！！！因为服务器没有返回其余的数据，所以我们不需要vuex来存储数据

2. 将参数带给服务器

   const actions = {
        
       // 将产品添加到购物车中
       async addOrUpdateShopCart({
         commit},{
         skuId,skuNum}){
        
           // 加入购物车返回的结果
           let result = await reqAddOrUpdateShopCart(skuId,skuNum);
           console.log('购物车',result);
           // 加入购物车以后（发请求），前台将参数带给服务器
           // 服务器写入数据成功，并没有返回其他的数据，只是返回code=200，代表这次成功
           // 因为服务器没有返回其余的数据，所以我们不需要vuex来存储数据
       },
   };
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

判断加入成功 或 失败

async：只要有async返回的就是Promise，Promise返回的不是成功就是失败

1. 发请求–将产品加入到数据库（通知服务器）

2. 服务器存储成功----进行路由跳转

3. 服务器存储失败------给用户提示

//      src/pages/detail/index.vue

	// 加入购物车的回调函数
    async addShopcar() {
   
      // 1. 发请求--将产品加入到数据库（通知服务器）
      //    服务器存储成功----进行路由跳转
      //    失败------给用户提示
      try {
   
        await this.$store.dispatch("detail/addOrUpdateShopCart", {
   skuId: this.$route.params.skuId,skuNum: this.skuNum,});
        // 成功了进行路由跳转
          .....
      } catch (error) {
   
        alert(error.message);
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

this.$store.dispatch("detail/addOrUpdateShopCart", {skuId: this.$route.params.skuId,skuNum: this.skuNum,});表示调用了addOrUpdateShopCart这个函数，

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/69897