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

I have a component in which I want to show a data defined in the state. I have created the getter:

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

And in the component I call it from computed:

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

I use that variable in an if in the template:

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

And in the console I get the following warning: [Vue warn]: Property "foo" was accessed during render but is not defined on instance.

I have tried to do it without the getters but I get the same warning:

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

CodePudding user response：

Since you're mapping the getters in your computed option, you should that getter name getFoo :

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