在声明的道具上出现意外的 vue 警告

Question

我正在学习 vuex。在将一些方法迁移到 vuex 操作后，我遇到了一个奇怪的问题。 在我将一些东西迁移到 vuex 并且我在组件 ...mapGetters 和 ...mapActions 中实现之前，我在一个运行良好的组件中遇到了这个错误。

错误是[Vue warn]: Property or method "isVisible" is not defined on the instance but referenced during render

但在我的数据中我已经声明了道具

  data() {
    return {
      id: state.userInfo.id,
      endCursor: state.userInfo.end_cursor,
      nextPageLoaded: false,
      isVisible: false,
      isVideo: null,
      url: null
    }
  }

   <div class="modal fade show" tabindex="-1" role="dialog" v-if="isVisible">
      <div class="modal-dialog">
        <div class="modal-content h-100 rounded-0">
          <div class="modal-header">
            <button type="button" class="close mb-3 float-right" @click.prevent="closeZoomModal()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!-- display image -->
            <img class="img-fluid w-100 h-100 img-zoom" :src="url" v-if="!isVideo">
            <!-- display video -->
            <div class="embed-responsive embed-responsive-4by3 h-100" v-else>
              <iframe class="embed-responsive-item h-100" :src="url" title=""></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>

这发生在用户单击 home 组件以搜索 ome 数据并加载引发错误的结果组件之后。

我该如何解决？错误是由...mapGetters 或...mapActions 引起的吗？

Answer 1

state 在data 中不可用。根据文档，您可以将实例作为数据函数的第一个参数传递

data: vm => ({
  isVisible: vm.$store.state.isVisible
})

...但我个人没有使用过它（它不适用于 Typescript，并且该组件仍处于生命周期的早期阶段，并且缺少很多东西）。此外，这只是一个分配（它只运行一次 - 它不是一个吸气剂 - 所以如果在设置 data 之后状态发生变化，data 将不会对此做出反应。你必须修改 @987654327 @prop 本身）。

---

因此，您需要做的是使用 ...mapState()（如果它们是 vuex 状态道具）、...mapGetters()（如果它们是 vuex getter）将所有与商店相关的组件属性从 data 移动到 computed ) 或使用显式计算语法：

computed: {
  isVisible() {
    return this.$store.state.isVisible; // if store state prop
    // return this.$store.getters['isVisible'] // if store getter
  }
}

如果您还希望能够分配给它（就像分配给 data 属性一样），您必须将上面的计算语法（仅 getter）替换为 getter + setter 语法：

computed: {
  isVisible: {
    get() {
      return this.$store.state.isVisible;
    },
    set(value) {
      this.$store.dispatch('setVisibility', value);
      // you can also commit mutations `this.$store.commit()` from here
    }
  }
}

如果您仍然遇到问题，请在codesandbox.io 上创建minimal reproducible example，我会帮助您解决问题。