如何捕获一个空的 Vuex 存储状态，但在初始化时让计算的属性对其做出反应

Question

我正在使用 Vuex 在 Vue Storefront 中开发一个项目。

我有以下元素可以在我的网上商店中对产品进行分类

      <SfSelect
        class="navbar__select sort-by"
        ref="SortBy"
        :selected="selectedSorting"
        @change="setSortingAttribute"
      >
        <SfSelectOption
          v-for="attribute in getSortingAttributes"
          :key="attribute.id"
          :value="attribute.title"
          class="sort-by__option"
          @click="setSelectedSortingAttribute(attribute)"
        >
          {{ attribute.title }}
        </SfSelectOption>
      </SfSelect>

其中 v-for="attribute in getSortingAttributes" 对所有可用过滤器执行 for 循环。

这些过滤器是通过以下计算从 Vuex 存储状态调用的属性:

getSortingAttributes: function () {
  if (store.state.tweakwise.tweakwiseLayeredNavigationAttributes
      .properties.sortfields
  ) {
    var tempSortAttributes =
      this.$store.state.tweakwise.tweakwiseLayeredNavigationAttributes
        .properties.sortfields;

    return tempSortAttributes;
  }
},

此数组位于 Vuex Store (tweakwiseLayeredNavigationAttributes.properties.sortfields) 中，其中 .poperties 是数组中的一个对象。该数组是通过 API 调用填充的，此调用是通过 Mount() 在与我上面提到的 SfSelect 函数相同的 class 中触发的。

尽管我在 getSortingAttributes 中添加了一个 if-statement 以防止它调用未定义的数据并使其成为计算的属性（一旦数据可用就调用它），我仍然收到以下错误：

渲染时出错：CategoryX/SubcategoryY/

TypeError: 无法读取未定义的属性 'sortfields'

Answer 1

您应该为您的代码添加安全措施 - 使用新的 nullish coalescing operator 或旧式布尔值或：

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

getSortingAttributes() 
{
  return (((this.$store.state.tweakwise || {}).tweakwiseLayeredNavigationAttributes || {}).properties || {}).sortfields || [];
},

如何捕获一个空的 Vuex 存储状态，但在初始化时让计算的属性对其做出反应

How to catch an empty Vuex Store state but have a computed property react to it when initialized

undefined

vue.js

vuex

如何捕获一个空的 Vuex 存储状态，但在初始化时让计算的 属性 对其做出反应

How to catch an empty Vuex Store state but have a computed property react to it when initialized

undefined

vue.js

vuex

如何捕获一个空的 Vuex 存储状态，但在初始化时让计算的属性对其做出反应