Uso

O composable useNuxtData é usado para acessar o valor atual em cache dos composables de busca de dados como useAsyncData, useLazyAsyncData, useFetch e useLazyFetch. Ao fornecer a chave usada durante a busca de dados, você pode recuperar os dados em cache e usá-los conforme necessário.

Isso é particularmente útil para otimizar o desempenho reutilizando dados já buscados ou implementando recursos como Atualizações Otimistas ou atualizações de dados em cascata.

Para usar useNuxtData, certifique-se de que o composable de busca de dados (useFetch, useAsyncData, etc.) tenha sido chamado com uma chave fornecida explicitamente.

Parâmetros

• key: A chave única que identifica os dados em cache. Esta chave deve corresponder àquela usada durante a busca de dados original.

Valores de Retorno

• data: Uma referência reativa aos dados em cache associados à chave fornecida. Se não existirem dados em cache, o valor será null. Este Ref atualiza automaticamente se os dados em cache mudarem, permitindo reatividade contínua em seus componentes.

Exemplo

O exemplo abaixo mostra como você pode usar dados em cache como um espaço reservado enquanto os dados mais recentes estão sendo buscados do servidor.

// Podemos acessar os mesmos dados mais tarde usando a chave 'posts'
const { data } = await useFetch('/api/posts', { key: 'posts' })

// Acesso ao valor em cache de useFetch em posts.vue (rota pai)
const { data: posts } = useNuxtData('posts')

const route = useRoute()

const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
  key: `post-${route.params.id}`,
  default() {
    // Encontre o post individual no cache e defina-o como o valor padrão.
    return posts.value.find(post => post.id === route.params.id)
  }
})

Atualizações Otimistas

O exemplo abaixo mostra como implementar Atualizações Otimistas pode ser alcançado usando useNuxtData.

Atualizações Otimistas é uma técnica onde a interface do usuário é atualizada imediatamente, assumindo que uma operação no servidor terá sucesso. Se a operação eventualmente falhar, a UI é revertida para seu estado anterior.

// Podemos acessar os mesmos dados mais tarde usando a chave 'todos'
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))

const newTodo = ref('')
let previousTodos = []

// Acesso ao valor em cache de useAsyncData em todos.vue
const { data: todos } = useNuxtData('todos')

async function addTodo () {
  return $fetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value
    },
    onRequest () {
      // Armazene o valor em cache anterior para restaurar se a busca falhar.
      previousTodos = todos.value

      // Atualize otimisticamente os todos.
      todos.value = [...todos.value, newTodo.value]
    },
    onResponseError () {
      // Reverter os dados se a solicitação falhar.
      todos.value = previousTodos
    },
    async onResponse () {
      // Invalidar todos em segundo plano se a solicitação for bem-sucedida.
      await refreshNuxtData('todos')
    }
  })
}

Tipo

useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }