如何使用 Composition API 在 Vue.js 3 中使类 getter 响应式？

我正在尝试使类实例属性响应以在身份验证失败时显示错误消息。

用户模型.ts

export class User {
  private error: string;

  set errorMessage(errorMessage: string) {
    this.error = errorMessage;
  }
  get errorMessage() {
    return this.error
  }

// other stuff...
}

登录视图.vue

import { User } from "./models/userModel";
import { ref } from 'vue';

const user = new User();
const errorMessage = ref(user.errorMessage); // <--- This is not working.
const errorMessage = ref(user.error); // <--- Neither this even if user.error property is public.

没有警告或异常，无功值只是保持为空。我缺少什么？

在这里，您正在创建新的反应变量，其初始值是您的类中的变量。你的班级和你的ref是无关的。

如果您希望您的类具有响应式属性，则必须以这种方式实例化它们：

export class User {
  private error: Ref<string> = ref('');

  public errorMessage: WritableComputedRef<string> = computed({
    get() {
      return this.error.value
    },
    set(errorMessage: string) {
      this.error.value = errorMessage;
    },
  })
}

旁注：我建议使用“可组合”方法而不是使用类，因为类实例与 SSR 不兼容。

export function useUser () {
  const user: User = reactive({})
  // other stuff...

  const error: Ref<string> = ref('');

  const errorMessage: WritableComputedRef<string> = computed({
    get() {
      return this.error.value
    },
    set(errorMessage: string) {
      this.error.value = errorMessage;
    },
  })

  return { user, errorMessage }
}