Vue 3 组合 API 从对象 ref 获取值

Question

我有一个ref：

const editItem = ref<object | null>(null)

这是它的一个示例值：

{
   id: 1,
   title: 'Harry Potter',
   author: 'J.K. Rowling',
   created: '30-08-2000',
}

如果我运行console.log(editItem.value)，我会看到这个对象：

但是当我尝试用console.log(editItem.value.author) 读取值的author 时，我看到了这个错误：

Object is possibly 'null'.

Answer 1

由于 ref 的类型是object | null，当你访问它时它可能是null，导致运行时异常。错误消息警告editItem.value 的这种可能性。

您可以添加一个null-检查其访问权限：

if (editItem.value) {
  console.log(editItem.value.author)
}

...或者你可以简单地使用optional chaining:

console.log(editItem.value?.author)

但是您会注意到，您会收到关于author 不是object 签名的一部分的不同警告。一种解决方案是将ref 的类型从object 更改为特定接口：

interface MyRef {
  id: number;
  title: string;
  author: string;
  created: string;
}

const editItem = ref<MyRef | null>(null)

console.log(editItem.value?.author) ✅

Answer 2

切希奇·米哈尔

问题（没有看到代码）似乎是您将 ref 用于对象值。虽然您可能会找到一些解决方法来使其工作，但处理反应性对象的最简单方法是使用 reactive 而不是 ref。

另一个好处是您在获取或设置对象值时不需要使用.value。