Vue 3 composição API obtém valor do objeto ref

Question

Eu tenho um ref:

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

Aqui está um exemplo de valor para ele:

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

Se eu correr console.log(editItem.value), vejo este objeto:

Mas quando tento ler o valor authorcom console.log(editItem.value.author), vejo este erro:

Object is possibly 'null'.

Answer 1

Como o tipo do ref é object | null, pode ser nullquando você o acessa, levando a uma exceção de tempo de execução. A mensagem de erro avisa sobre essa possibilidade de editItem.value.

Você pode adicionar uma nullverificação em torno de seu acesso:

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

... ou você pode simplesmente usar o encadeamento opcional :

console.log(editItem.value?.author)

Mas você notará que receberá um aviso diferente sobre authornão fazer parte da assinatura de object. Uma solução é mudar o reftipo de objectpara uma interface específica:

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

O problema (sem ver o código) parece ser que você está usando ref para um valor de objeto. Embora você possa encontrar alguma solução alternativa para fazê-lo funcionar, a maneira mais simples de lidar com objetos reativos é usar em reactivevez de ref.

Um benefício adicional é que você não precisará usar .valueao obter ou definir o valor do objeto.