访问Vuex Store数组出现tweakwiseSortedProducts[0] undefined报错

错误根因 #

当前校验逻辑仅覆盖了 tweakwiseSortedProducts 本身是否存在的场景，没有校验该数组是否为空。当数组处于初始化空状态、或接口返回空数组时，直接访问下标为0的元素会得到 undefined，后续访问 noProducts 属性就会抛出控制台报错。

修复方案 #

两种实现均可，按需选择：

方案1：显式增加数组非空判断（可读性更高） #

tweakwiseHasProducts () {
  const sortedProducts = this.$store.state.tweakwise?.tweakwiseSortedProducts
  // 同时校验数组存在、且数组长度大于0
  if (Array.isArray(sortedProducts) && sortedProducts.length > 0) {
    return sortedProducts[0].noProducts === false
  }
  return false
},

方案2：使用可选链操作符全链路校验（代码更简洁） #

利用可选链直接覆盖所有层级的undefined场景，无需多层if判断：

tweakwiseHasProducts () {
  return this.$store.state.tweakwise?.tweakwiseSortedProducts?.[0]?.noProducts === false
},

可选链遇到任意一层为undefined/null时会直接返回undefined，此时和false做全等比较结果自然为false，和原有逻辑的返回规则完全一致。

额外优化建议 #

如果修复后仍偶现报错，可以在Vuex中给tweakwiseSortedProducts设置初始值为空数组，避免初始化阶段该字段为undefined的异常场景。

内容的提问来源于stack exchange，提问作者Craws