useLazyFetch
Este envoltorio alrededor de useFetch desencadena la navegación inmediatamente.
Descripción
Por defecto, useFetch bloquea la navegación hasta que su manejador asíncrono se resuelve. useLazyFetch proporciona un envoltorio alrededor de useFetch que desencadena la navegación antes de que el manejador se resuelva configurando la opción lazy a true.
useLazyFetch tiene la misma firma que useFetch.
Esperar a useLazyFetch en este modo solo asegura que la llamada se inicialice. En la navegación del lado del cliente, los datos pueden no estar disponibles inmediatamente, y debes asegurarte de manejar el estado pendiente en tu aplicación.
Ejemplo
<script setup lang="ts">
/* La navegación ocurrirá antes de que la obtención de datos se complete.
* Maneja los estados 'pending' y 'error' directamente dentro de la plantilla de tu componente
*/
const { status, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
// Debido a que los posts podrían comenzar siendo nulos, no tendrás acceso
// a su contenido inmediatamente, pero puedes observarlo.
})
</script>
<template>
<div v-if="status === 'pending'">
Cargando ...
</div>
<div v-else>
<div v-for="post in posts">
<!-- hacer algo -->
</div>
</div>
</template>
useLazyFetch es un nombre de función reservado transformado por el compilador, por lo que no debes nombrar tu propia función useLazyFetch.
※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.
La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/composables/use-lazy-fetch