当前位置:   article > 正文

② 尚品汇的前台开发笔记【尚硅谷】【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来存储数据

  1. 将参数带给服务器

    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
推荐阅读
相关标签