如何捕获Vuex空存储状态，让初始化的计算属性正常响应且避免报错

报错原因 #

你当前的判断逻辑直接链式访问多层嵌套属性，初始状态下API还未返回数据，tweakwiseLayeredNavigationAttributes或它下面的properties属性为undefined，此时访问properties.sortfields时就会直接抛出错误，不会走到判断sortfields是否存在的步骤。同时原计算属性未在判断不通过时返回默认值，默认返回undefined也会导致v-for遍历异常。

修复方案 #

方案1：使用可选链操作符（推荐，ES2020+环境通用）

直接通过可选链逐层校验属性存在性，兜底返回空数组即可：

getSortingAttributes: function () {
  return this.$store.state.tweakwise?.tweakwiseLayeredNavigationAttributes?.properties?.sortfields || []
}

方案2：逐层手动校验（兼容低版本ES环境）

如果项目不支持可选链语法，手动逐层判断每一层属性是否存在：

getSortingAttributes: function () {
  const tweakwiseState = this.$store.state.tweakwise
  if (
    tweakwiseState &&
    tweakwiseState.tweakwiseLayeredNavigationAttributes &&
    tweakwiseState.tweakwiseLayeredNavigationAttributes.properties &&
    Array.isArray(tweakwiseState.tweakwiseLayeredNavigationAttributes.properties.sortfields)
  ) {
    return tweakwiseState.tweakwiseLayeredNavigationAttributes.properties.sortfields
  }
  return []
}

额外优化建议 #

你可以给Vuex的tweakwise模块设置初始默认值，从根源避免嵌套属性访问报错：

// tweakwise模块的state初始值配置
state: {
  tweakwiseLayeredNavigationAttributes: {
    properties: {
      sortfields: []
    }
  }
  // 其他state配置
}

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