useLazyAsyncData
Este wrapper em torno de useAsyncData aciona a navegação imediatamente.
Descrição
Por padrão, useAsyncData bloqueia a navegação até que seu manipulador assíncrono seja resolvido. useLazyAsyncData fornece um wrapper em torno de useAsyncData que aciona a navegação antes que o manipulador seja resolvido, definindo a opção lazy como true.
useLazyAsyncData tem a mesma assinatura que useAsyncData.
Exemplo
pages/index.vue
<script setup lang="ts">
/* A navegação ocorrerá antes que a busca seja concluída.
Lide com os estados 'pending' e 'error' diretamente no template do seu componente
*/
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// Como count pode começar como nulo, você não terá acesso
// ao seu conteúdo imediatamente, mas pode observá-lo.
})
</script>
<template>
<div>
{{ status === 'pending' ? 'Loading' : count }}
</div>
</template>
useLazyAsyncData é um nome de função reservado transformado pelo compilador, então você não deve nomear sua própria função como useLazyAsyncData.
※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.
A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/api/composables/use-lazy-async-data