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

Question

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

userModel.ts

export class User {
  private error: string;

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

// other stuff...
}

LoginView.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.

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

Answer 1

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

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 }
}

Answer 2

像

ref(user.error)

这样通过值访问原始属性不能是响应式的，无论它是否是 getter，在这种情况下它与

ref(undefined)

没有区别。

对于自己的可枚举属性，它可能是：

let user = reactive(new User());
let { error } = toRefs(user);

它不会处理属性访问器，它们需要使用计算属性显式访问：

let errorMessage = computed({
  get: () => user.errorMessage,
  set: value => { user.errorMessage = value }
});

无论是 getter 还是常规属性都不会影响计算的工作方式，因为访问器是在类原型上定义的，并且访问响应式

this.error

（当非响应式

this

绑定在构造函数中时，这可能会出现问题，例如显示于此处和此处）。

Answer 3

我确实做了一些非常类似的事情，但没有成功

@vueuse 提供了一个 createsharedcomposable，允许跨整个应用程序进行反应，使用类结构不会有好处