Vue学习中JS基础不牢的惨痛教训

在学习尚硅谷Vue商城项目时，深深体会到基础不牢，地动山摇这八个字的深切含义。

闲言少叙 书归正传

代码进行到商品详情页中添加购物车向服务器发请求保存商品信息及商品数量阶段，服务器一直返回201，且返回信息失败，百度也不知道该搜到什么度，谷歌也不知道该唱什么歌，黔驴技穷后还以为是服务器接口挂掉，或者是后台老师自作主张修改了游客UUID的key，导致无法向服务器发出正确的请求。

商品详情页中点击“添加购物车”按钮的回调函数

// 加入购物车的回调函数
    async addToCart() {
      // 发请求
      try {
        await this.$store.dispatch('addOrUpdateCart', {skuId:this.$route.params.skuId, skuNum: this.skuNum})
        
        // 使用 session 存储
        sessionStorage.setItem('skuInfo', JSON.stringify(this.skuInfo))
        this.$router.push({name:'addcartsuccess', query:{skuNum: this.skuNum}})
      } catch (error) {
        console.log(error.message);
      }
    }

回调函数执行结果一切正常，可以正确获取到需要传递的skuId和skuNum参数

store 中的将产品添加到购物车中的原始代码

  // 将产品添加到购物车中
  async addOrUpdateCart({commit},{ skuId, skuNum }) {
    // 服务器并没有返回数据，因此不需要三连环存储数据
    let result = await reqAddOrUpdateShopCart(skuId, skuNum)
    // 别忘了 axios 是由 promise 封装的
    console.log(result);
    if (result.code == 200) {
      return 'ok'
    } else {
      return Promise.reject(new Error('failure'))
    }
  }
}

store 中的我自作聪明将产品添加到购物车中修改的代码

// 将产品添加到购物车中
  async addOrUpdateCart({ skuId, skuNum }) {
    // 服务器并没有返回数据，因此不需要三连环存储数据
    let result = await reqAddOrUpdateShopCart(skuId, skuNum)
    // 别忘了 axios 是由 promise 封装的
    console.log(result);
    if (result.code == 200) {
      return 'ok'
    } else {
      return Promise.reject(new Error('failure'))
    }
  }
}

就是因为我自作聪明将函数中没有用到的{commit}删除，致使skuId和skuNum解构后拿不到正确的值。翻看调试窗口打印这两个参数发现全都是undefined，始终无法想明白是怎么回事。

像这种愚蠢的错误只要基础牢固就能避免，白白浪费了好几个小时检查bug，共勉！！