L'API de composition Vue 3 obtient la valeur de la référence d'objet

Question

J'ai un ref:

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

Voici un exemple de valeur pour cela:

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

Si je cours console.log(editItem.value), je vois cet objet:

Mais quand j'essaye de lire la valeur authoravec console.log(editItem.value.author), alors je vois cette erreur:

Object is possibly 'null'.

Answer 1

Étant donné que le type de la référence est object | null, cela peut être nulllorsque vous y accédez, ce qui entraîne une exception d'exécution. Le message d'erreur avertit de cette possibilité pour editItem.value.

Vous pouvez soit ajouter un null-check autour de son accès:

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

... ou vous pouvez simplement utiliser le chaînage optionnel :

console.log(editItem.value?.author)

Mais vous remarquerez que vous recevrez un avertissement différent de authorne pas faire partie de la signature pour object. Une solution consiste à changer le reftype de objectà une interface spécifique:

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

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

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

Answer 2

Cześć Michal

Le problème (sans voir le code) semble être que vous utilisez ref pour une valeur d'objet. Bien que vous puissiez trouver une solution de contournement pour le faire fonctionner, le moyen le plus simple de gérer les objets réactifs consiste à utiliser à la reactiveplace de ref.

Un avantage supplémentaire est que vous n'aurez pas besoin de l'utiliser .valuelorsque vous obtenez ou définissez la valeur de l'objet.