하위에서 스토어 변경을 트리거해도 스토어가 업데이트되지 않습니다.

하위에서 스토어 변경을 트리거해도 스토어가 업데이트되지 않습니다.

부모 파일 html

<div v-if="!refresh" class="c-focus-mode">
  <div class="c-focus-mode__container">
    <div class="c-focus-mode__container-left">
      <slide-card
        focus
        hideBottom
        :slideID="slideID"
        :index="orderIndex"
        :totalCount="5"
        :totalDuration="10"
        :isMobile="false"
      >
// Does not work (1)
      <template v-slot:prevSlideBtnLeft>
        <app-button
          v-if="!prevInvalid"
          type="circular"
          class="c-slide-card-preview__btn c-slide-card-preview__btn--prev"
          @click="goToSlide(-1)"
          ><app-icon name="chevron-left"></app-icon>
        </app-button>
      </template>
      <template v-slot:nextSlideBtnRight>
        <app-button
          v-if="!nextInvalid"
          type="circular"
          class="c-slide-card-preview__btn c-slide-card-preview__btn--next"
          @click="goToSlide(1)"
          ><app-icon name="chevron-right"></app-icon>
        </app-button>
      </template>
      </slide-card>
// Works below (2)
      <div
        class="c-focus-mode__container-left-navigation"
        :class="{['c-focus-mode__container-left-navigation--no-prev']: prevInvalid}"
      >
      <app-button
        v-if="!prevInvalid"
        type="circular"
        class="c-slide-card-preview__btn c-slide-card-preview__btn--prev"
        @click="goToSlide(-1)"
        ><app-icon name="chevron-left"></app-icon>
      </app-button>
      <app-button
        v-if="!nextInvalid"
        type="circular"
        class="c-slide-card-preview__btn c-slide-card-preview__btn--next"
        @click="goToSlide(1)"
        ><app-icon name="chevron-right"></app-icon>
      </app-button>
      </div>
    </div>
    <slide-card
      focus
      hideTop
      :slideID="slideID"
      :index="orderIndex"
      :totalCount="5"
      :totalDuration="10"
      :isMobile="false"
    >
    </slide-card>
  </div>
</div>

앱 버튼 컴포넌트에 의해 호출되는 함수

  public goToSlide(increment) {
    const newIndex = this.orderIndex + increment;
    if (newIndex < 0 || newIndex >= this.deckSlides.length) {
      return;
    }
    this.setActiveSlide(newIndex);
  }

  private setActiveSlide(index) {
    this.slideIndex = index + 1;
    const { deckID, ID: slideID } = this.deckSlides[index];

    if (deckID && slideID) {
      this.$store.dispatch('deck/setActiveSlides', { deckID, slideID });
      history.replaceState({}, null, `/d/${this.deckID}/edit/focus/${index + 1}`);
    }
  }

「아래의 작업」(2)의 버튼에서 goToSlide를 호출하면 스토어가 정상적으로 갱신되지만, 「동작하지 않는다」(1)의 버튼에서 같은 기능을 호출하면 스토어가 갱신되지 않는다.부모에서 goToSlide 기능을 트리거하기 위한 액션을 슬라이드 카드에서 내보내려고 하면 같은 현상이 발생합니다.

문제는 슬롯 내에서 메서드를 호출하려고 하는데 디폴트로는 슬롯은 부모 컴포넌트에 정의되어 있는 데이터와 메서드에 액세스할 수 없다는 것입니다.

「스코프 슬롯」이라고 불리는 슬롯의 메서드에 액세스 할 수 있습니다.이 메서드에 대한 매뉴얼링크는 다음과 같습니다.

vue의 범위 지정 슬롯

또한 이 답변은 도움이 될 수 있습니다.

슬롯으로부터의 콜 방식

언급URL : https://stackoverflow.com/questions/65090197/triggering-from-child-to-change-the-store-does-not-updates-the-store