Vue 3 组合 API - 属性 由 setup() "accessed during render but is not defined on instance." 返回

Question

我正在玩弄 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，我正在实施 this article 中提出的简单 Vue 3 商店 class，因此它应该是 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
    }
}

Answer 1

我认为您没有在 class 组件中导入 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>