Vue 3 Composition API - setup() 返回的属性“在渲染期间访问但未在实例上定义。”

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 store 类，所以它应该是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

我认为您缺少在类组件中导入 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>