尚品会项目-购物车-商品数量更改

发送请求携带的参数中有undefined

ES6中对象的解构赋值——出现undefined的原因之一

背景

做vue项目中,vuex中的actions向服务器发请求的函数addOrUpdateShopCart需要携带两个参数向服务器发请求。
此图片是向actions的函数传递实参。但是传递的是一个对象{} ,对象里有两组key-value值。尚品会项目-购物车-商品数量更改_第1张图片
下面这张图片是actions里的函数接收实参。且使用对象解构的来解构传过来的对象{skuid:cartInfo.skuId,skuNum:disNum}
对象的解构实际上是属性匹配,变量的名字匹配对象中属性的名字,如果匹配成功,就将对象中属性的值赋予给变量
尚品会项目-购物车-商品数量更改_第2张图片

实际编写代码犯的错

但是若其中有一个属性名字不一致,会导致解构不出来,而出现undefined的错误
如下图演示
尚品会项目-购物车-商品数量更改_第3张图片
而这里接收实参的对象解构的属性名却没有和第一个传过来的实参名一致
写的时候一定要注意对象解构的属性名是区分大小写的
尚品会项目-购物车-商品数量更改_第4张图片
但是调试工具并没有给我抛出错误。最后各种猜想和调试,最终在下面这张图发现了出错的要点
尚品会项目-购物车-商品数量更改_第5张图片
出错的原因就是我上面强调的解构赋值和要被解构的对象属性名一定要一样(特别是大小写)

你可能感兴趣的:(尚品会项目,前端,vue.js,javascript)