修改类中ref类型的变量失败

Question

新建一个文件MyClass.ts，定义的一个类，关键代码

import { ref } from 'vue';

class MyClass {
  isLoadingData = ref<boolean>(false); // 响应式引用

  someMethod() {
    this.isLoadingData.value = true; // 使用 .value 来更新响应式引用的值
  }
}

在log.vue文件中创建这个类并使用someMethod方法的时候出现一下报错内容：

 Uncaught (in promise) TypeError: Cannot create property 'value' on boolean 'false'

这是为什么？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

在 Vue.js 中使用 Composition API 的 ref 函数时，ref 创建的是一个响应式引用，而不是原始值。这意味着 ref 会返回一个包含 value 属性的对象，这个对象允许你读取和修改 value 属性的值。

从你提供的代码来看，你已经正确地使用了 ref 来创建 isLoadingData，并且尝试通过 isLoadingData.value 来更新它的值。然而，报错信息表明在某个时刻，isLoadingData 被错误地当作一个布尔值 false 来处理，而不是一个包含 value 属性的对象。

这个错误可能发生在以下几个场景：

1. 类的实例化过程中：如果在创建 MyClass 实例的过程中，isLoadingData 被错误地赋值为 false 而不是 ref(false)，那么后续尝试访问 isLoadingData.value 时就会报错。

2. 类的属性被意外覆盖：如果在类的某个地方，isLoadingData 被重新赋值为 false，那么 isLoadingData.value 将不存在。

3. 错误的使用：如果在 log.vue 文件中错误地使用了 MyClass，例如直接修改了 isLoadingData 的值而不是它的 value 属性，也会导致这个错误。

为了解决这个问题，请确保以下几点：

• 确保 isLoadingData 在类中始终是一个 ref 对象。
• 在 log.vue 或其他地方使用 MyClass 时，不要直接修改 isLoadingData，而是通过 isLoadingData.value 来读取或设置值。
• 如果在类的其他方法中需要修改 isLoadingData，请确保是通过 isLoadingData.value = true 或 isLoadingData.value = false 来进行。

下面是一个修正后的示例，展示如何在类中正确使用 ref：

import { ref } from 'vue';

class MyClass {
  isLoadingData = ref(false); // 响应式引用

  someMethod() {
    this.isLoadingData.value = true; // 正确更新响应式引用的值
  }
}

// 在 Vue 组件中使用 MyClass
export default {
  // ...
  mounted() {
    const myClassInstance = new MyClass();
    myClassInstance.someMethod(); // 这将正确地设置 isLoadingData 的值为 true
  }
  // ...
}

如果你需要更多关于 Vue.js ref 的信息，可以查看 Vue.js 的官方文档：

• Vue.js 官方文档 - Reactivity in Depth
• Vue.js 官方文档 - ref API

这些文档将提供更多关于 ref 如何工作以及如何正确使用它的详细信息。