Vue学习中JS基础不牢的惨痛教训
在学习尚硅谷Vue商城项目时,深深体会到基础不牢,地动山摇这八个字的深切含义。
闲言少叙书归正传
代码进行到商品详情页中添加购物车向服务器发请求保存商品信息及商品数量阶段,服务器一直返回201,且返回信息失败,百度也不知道该搜到什么度,谷歌也不知道该唱什么歌,黔驴技穷后还以为是服务器接口挂掉,或者是后台老师自作主张修改了游客UUID的key,导致无法向服务器发出正确的请求。
商品详情页中点击添加购物车按钮的回调函数加入购物车的回调函数asyncaddToCart(){发请求try{awaitthis。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中的将产品添加到购物车中的原始代码将产品添加到购物车中asyncaddOrUpdateCart({commit},{skuId,skuNum}){服务器并没有返回数据,因此不需要三连环存储数据letresultawaitreqAddOrUpdateShopCart(skuId,skuNum)别忘了axios是由promise封装的console。log(result);if(result。code200){returnok}else{returnPromise。reject(newError(failure))}}}
store中的我自作聪明将产品添加到购物车中修改的代码将产品添加到购物车中asyncaddOrUpdateCart({skuId,skuNum}){服务器并没有返回数据,因此不需要三连环存储数据letresultawaitreqAddOrUpdateShopCart(skuId,skuNum)别忘了axios是由promise封装的console。log(result);if(result。code200){returnok}else{returnPromise。reject(newError(failure))}}}
就是因为我自作聪明将函数中没有用到的{commit}删除,致使skuId和skuNum解构后拿不到正确的值。翻看调试窗口打印这两个参数发现全都是undefined,始终无法想明白是怎么回事。
像这种愚蠢的错误只要基础牢固就能避免,白白浪费了好几个小时检查bug,共勉!!