One of the components I'm working on displays data that is defined in the component's state. To access this data, I created a getter:
export default createStore({
state: {
foo: true,
},
getters: {
getFoo: state => state.foo
}
}
The getter is then called in the component using computed properties:
computed: {
...mapGetters(['getFoo']),
}
I utilize the variable in an if statement within the template:
<template>
<template v-if="foo">
<span>Bar</span>
</template>
</template>
However, upon checking the console, I notice the following warning:
[Vue warn]: Property "foo" was accessed during render but is not defined on instance.Even after trying to access the getter directly without using mapGetters, I still encounter the same warning:
computed: {
getFoo() {
return this.$store.getters.getFoo;
}
}