Getters：在渲染期间访问了属性，但未在实例上定义答案

【问题标题】：Getters: Property was accessed during render but is not defined on instanceGetters：在渲染期间访问了属性，但未在实例上定义
【发布时间】：2021-10-20 13:50:19
【问题描述】：

我有一个组件，我想在其中显示状态中定义的数据。我已经创建了吸气剂：

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.

我尝试在没有吸气剂的情况下这样做，但我得到了同样的警告：

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

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

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

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

【讨论】：