getter:属性在渲染期间被访问，但没有在实例上定义

Question

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

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

在组件中我调用from computed:

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

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

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