uni-app HbuilderX 和 微信开发者中工具编译通过 但Vuex中getters计算属性在小程序的页面显示为undefined

问题:

在复习到uni-app项目计算购物车选中商品总价时，开发工具编译都通过，但是购物车页面显示undefined，看了半天自己写的表达式逻辑，硬是没找到问题所在，尝试问了AI，AI回答的也逐渐离谱

问题截图:

Vuex中的计算选中商品总价的代码段逻辑如下:

  getters:{
    
    
    //计算选中商品总价
    totalSelectedGoodsPrice(state){
    
    
      return state.cart.filter(item=>item.goods_state).reduce((currentVal,filtItem)=>{
    
    currentVal+= filtItem.goods_num*filtItem.goods_price},0)
    }
      
  }

代码段逻辑分析:
通过调用该文件仓库中的state对象里的购物车属性(数组)，使用filter过滤器筛选购物车中每一项选中状态为真的值并返回为一个新数组，之后再使用求和函数reduce，赋予初始值0给currentVal，遍历刚刚筛选出的新数组，每一项值为filtItem，通过filtItem身上的属性叠加计算每一项选中商品的总价，最后返回给计算属性totalSelectedGoodsPrice

问题分析:

1.其实通过代码段逻辑的分析，我始终觉得我的逻辑应该没有大的问题，但重启重编译清缓存就是无效。

2.尝试使用AI辅助解答，AI夸我没问题，但是页面还是有问题啊，我又问了它一遍确认没问题吗，它居然最后来了这么一段:

后面它一直陷入死循环，直到…

好吧，这下真的人傻了,不过当时也是又气又乐(文心一言，出院!)

3.AI也靠不住，只好继续自己分析了，后面我想再确认下是否是这个计算属性的问题，于是返回了一个固定值给计算属性，结果页面显示正常。

4.那问题还是出在上面这一个代码段中，那为什么会显示undefined呢，我的逻辑应该没问题啊?

原因

后面找了半天资料，还是不知所措，最后只能查看项目文档，看它的逻辑和我写的一样，运行结果居然是正常的，

代码段如下:

    //计算选中商品总价
    totalSelectedGoodsPrice(state){
    
    
      return state.cart.filter(item=>item.goods_state).reduce((currentVal,filtItem)=>currentVal+= filtItem.goods_num*filtItem.goods_price,0)
    }

后面看了半天，终于发现了，原来它的reduce函数体的表示外层没有{}大括号，其他代码逻辑和我没有区别，至少本意上没有区别…那么到这儿，这个编译无异常，但是计算属性在页面显示undefined的问题算是解决了。

扫描二维码关注公众号，回复： 17485917 查看本文章

总结:

本次遇到的问题，还是对于es6箭头函数语法不熟练所导致的。在reduce函数体只有一行表达式要返回它的结果时，不应该像普通函数那样加大括号，不熟练的时候还是要先写可读性高的代码才好。