Getters：属性在渲染期间被访问但未在实例上定义

Question

我有一个组件，我想在其中显示状态中定义的数据。我创建了 getter:

export default createStore({
   state: {
      foo: true,
   },
   getters: {
      getFoo: state => state.foo
   }
}

在我从计算调用它的组件中：

computed: {
   ...mapGetters(['getFoo']),
}

我在模板的 if 中使用该变量：

<template>
      <template v-if="foo">
         <span>Bar</span>
      </template>
</template>

并且在控制台中我收到以下警告：[Vue warn]: Property "foo" was accessed during render but is not defined on instance.

我尝试在没有 getter 的情况下执行此操作，但我收到相同的警告：

computed: {
   getFoo() {
     return this.$store.getters.getFoo;
   }
}

Answer 1

由于您在计算选项中映射 getter，因此您应该 getter 名称 getFoo :

<template>
      <template v-if="getFoo">
         <span>Bar</span>
      </template>
</template>

Getters: Property was accessed during render but is not defined on instance