Vue 3组合API -由setup()返回的属性“在呈现过程中被访问，但未在实例上定义。”
Vue 3组合API -由setup()返回的属性“在呈现过程中被访问，但未在实例上定义。”
提问于 2020-12-08 02:10:17
我正在摆弄Vue 3的组合API，创建了一个小的应用内消息控制台，我不知道我的代码中哪里有错误。呈现这个组件时，可以在呈现期间(在循环中)访问state，但我认为我在setup()返回的对象中正确地定义了它
<template>
<div>
<p class="message" v-for="message in state.messages" v-bind:key="message.id">{{message.text}}</p>
</div>
</template>
<script lang="ts" >
import { Options, Vue } from 'vue-class-component';
import { consoleStore } from "@/store/ConsoleStore"
@Options({})
export default class Console extends Vue {
setup() {
console.log("setup entered")
consoleStore.record("This is a test.")
let state = consoleStore.getState()
return {
state
}
}
}
</script>此外，console.log("setup entered")行不会向开发控制台输出任何内容。就好像从来没有进入设置块一样。对于consoleStore，我实现了在this article中提出的简单的Vue 3存储类，因此它应该是一个readonly(reactive(stuff))
import { reactive, readonly } from 'vue';
export abstract class AbstractStore<T extends Object> {
protected state: T;
constructor() {
let data = this.data();
this.setup(data);
this.state = reactive(data) as T;
}
protected abstract data(): T
protected setup(data: T): void { }
public getState(): T {
return readonly(this.state) as T
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-08 02:45:29
我认为您没有在类组件中导入setup：
import { Options, Vue,setup } from 'vue-class-component';
import { consoleStore } from "@/store/ConsoleStore"
function useState () {
console.log("setup entered")
consoleStore.record("This is a test.")
let state = consoleStore.getState()
return {
state
}
}
@Options({})
export default class Console extends Vue {
state= setup(() =>useState())
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65187090
复制相关文章
相似问题
腾讯云开发者
