时间戳

首页 > 解决方案 > 从子触发更改商店不会更新商店

javascript - 从子触发更改商店不会更新商店

问题描述

父文件 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}`);
    }
  }

当从“Works below (2)”处的按钮调用 goToSlide 时，store 更新成功，但是当从“Does not work (1)”处的按钮调用相同的函数时，store 没有更新。当我尝试从滑动卡发出动作以触发父级中的 goToSlide 函数时，也会发生同样的事情。

标签： javascriptvue.jsvuejs2vuex

解决方案

我认为问题在于您试图从插槽中调用该方法，并且默认情况下，插槽无法访问父组件中定义的数据和方法。

您可以做的是，您应该提供对称为“作用域插槽”的插槽方法的访问，这是它的文档链接：

Vue中的作用域插槽

这个答案也可能有帮助：

从插槽调用方法

推荐阅读