useLazyAsyncData
Este envoltorio alrededor de useAsyncData desencadena la navegación inmediatamente.
Descripción
Por defecto, useAsyncData bloquea la navegación hasta que su manejador asíncrono se resuelve. useLazyAsyncData proporciona un envoltorio alrededor de useAsyncData que desencadena la navegación antes de que el manejador se resuelva, estableciendo la opción lazy a true.
useLazyAsyncData tiene la misma firma que useAsyncData.
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: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// Debido a que count podría comenzar siendo nulo, no tendrás acceso
// a su contenido inmediatamente, pero puedes observarlo.
})
</script>
<template>
<div>
{{ status === 'pending' ? 'Loading' : count }}
</div>
</template>
useLazyAsyncData es un nombre de función reservado transformado por el compilador, por lo que no deberías nombrar tu propia función useLazyAsyncData.
※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-async-data