从子触发更改商店不会更新商店答案

【问题标题】：Triggering from child to change the store does not updates the store从子触发更改商店不会更新商店
【发布时间】：2020-12-01 12:08:22
【问题描述】：

父文件 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 函数时，也会发生同样的事情。

【问题讨论】：

点击处理程序是否被触发？
它确实被触发了

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

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

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

scoped slots in vue

这个答案也可能有帮助：

call method from slot

【讨论】：

感谢您的回答，但我可以使用该方法，它确实会被触发。不幸的是，我的问题是调用父函数时商店没有更新。即使我不使用作用域并通过发出事件来解决它，我也会遇到同样的问题。