typescript - Vue 3 Composition API - setup() 返回的属性“在渲染期间访问但未在实例上定义。”
问题描述
我正在玩弄 Vue 3 的 Composition 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
我正在实现本文中提出的简单 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
}
}
解决方案
我认为您缺少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>
推荐阅读
- gradle - Gradle publishToMavenLocal 不会将 jar 复制到本地 Maven 存储库
- java - Sentry 无法同步 HDFS 文件和 Hive 表之间的 ACL
- javascript - 使用 Express Router 时,这两行是否等效?
- react-native - Facebook 登录后无法让 React 本机应用导航到主屏幕
- pyspark - 如何将 FPGrowth 项目集限制为 2 或 3
- thingsboard - Thingsboard RestApi - 返回 500error
- mips - MIPS 数据危害
- mysql - 哪个索引或查询将具有最佳性能?
- android - 清单合并失败-appcomponentfactory
- python - Flask 中的蓝图和模板有什么区别?