빈 Vuex Store 상태를 포착하지만 초기화할 때 계산된 속성이 이에 반응하도록 하는 방법

빈 Vuex Store 상태를 포착하지만 초기화할 때 계산된 속성이 이에 반응하도록 하는 방법

나는 Vue Storefront에서 Vuex와 함께 프로젝트를 하고 있다.

내 웹샵에서 제품을 분류하기 위해 다음과 같은 요소를 가지고 있다.

      <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"사용 가능한 모든 필터에 대한 검사 수행

이러한 필터는 다음과 같은 계산된 속성을 통해 Vuex Store State에서 호출된다.

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

    return tempSortAttributes;
  }
},

이 어레이는 Vuex Store(tweakWiseLayedNavigationAttributes.properties)에 있다..poperties가 배열의 객체인 sortfields).어레이는 API 호출을 통해 채워지며, 이 호출은 위에서 언급한 SfSelect 기능과 같은 클래스의 마운트()를 통해 트리거된다.

Eventhought I added a anif-statement에게getSortingAttributes그것이 정의되지 않은 데이터를 호출하지 못하게 하고 (데이터가 입수되는 즉시 그것을 호출하기 위해) 계산된 속성으로 만드는 것을 막기 위해, 나는 여전히 다음과 같은 오류를 얻는다.

렌더링 중 오류 발생: CategoryX/SubcategoryY/

TypeError: 정의되지 않은 속성 'sortfield'를 읽을 수 없음

당신은 당신의 코드에 안전장치를 추가해야 한다 - 새로운 nullish conscling operator 또는 구식 부울 OR:

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

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

아마도 당신은 확인하려고 노력한다.length배열:

getSortingAttributes: function () {
  if (store.state.tweakwise.tweakwiseLayeredNavigationAttributes
      .length
  ) {...

참조URL: https://stackoverflow.com/questions/69028031/how-to-catch-an-empty-vuex-store-state-but-have-a-computed-property-react-to-it