时间戳

首页 > 解决方案 > 在声明的道具上出现意外的 vue 警告

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

问题描述

我正在学习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>

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

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

标签： vue.js

解决方案

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

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

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

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

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

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

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 上创建一个最小的可重现示例，我会帮助您解决问题。

推荐阅读