useLazyFetch
Este wrapper em torno de useFetch aciona a navegação imediatamente.
Descrição
Por padrão, useFetch bloqueia a navegação até que seu manipulador assíncrono seja resolvido. useLazyFetch fornece um wrapper em torno de useFetch que aciona a navegação antes que o manipulador seja resolvido, definindo a opção lazy como true.
useLazyFetch tem a mesma assinatura que useFetch.
Aguardar useLazyFetch neste modo apenas garante que a chamada seja inicializada. Na navegação do lado do cliente, os dados podem não estar imediatamente disponíveis, e você deve garantir que o estado pendente seja tratado em seu aplicativo.
Exemplo
<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: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
// Como posts pode começar como nulo, você não terá acesso
// ao seu conteúdo imediatamente, mas pode observá-lo.
})
</script>
<template>
<div v-if="status === 'pending'">
Carregando ...
</div>
<div v-else>
<div v-for="post in posts">
<!-- faça algo -->
</div>
</div>
</template>
useLazyFetch é um nome de função reservado transformado pelo compilador, então você não deve nomear sua própria função como useLazyFetch.
※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-fetch