小编Con*_*ley的帖子

我有一个使用 ES6 私有字段和公共 getter 的类，我需要使用 Vue 3 的组合 API 进行响应。目前，我的设置看起来像这样：

//store.ts
class Store {
  #userName?: string
  get userName() {
    if(this.#userName !== undefined) return this.#userName
    throw new Error('Cannot get userName before it is defined')
  }

  setUserName(newUserName: string) {
    this.#userName = newUserName
  }
}

const store = reactive(new Store())

export { store }

然后通过提供/注入 API 将该存储实例提供给组件，并像这样使用

<template>
  <span> {{ formattedUserName }} </span>
</template>

<script lang="ts">
import { defineComponent, toRefs, inject } from 'vue'

export default defineComponent({
  setup(){
    const store = inject('storeKey')
    const …