useLazyAsyncData
Это обертка вокруг useAsyncData запускает навигацию немедленно.
Описание
По умолчанию, useAsyncData блокирует навигацию до тех пор, пока его асинхронный обработчик не будет разрешен. useLazyAsyncData предоставляет обертку useAsyncData, которая запускает навигацию до разрешения обработчика, установив опцию lazy в true.
useLazyAsyncData имеет ту же сигнатуру, что и useAsyncData.Пример
pages/index.vue
<script setup lang="ts">
/* Навигация произойдет до завершения загрузки.
Обрабатывайте состояния 'pending' и 'error' непосредственно в шаблоне компонента.
*/
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// Поскольку count может быть изначально равным null, вы не сможете получить доступ
// к его содержимому немедленно, но вы можете наблюдать за ним.
})
</script>
<template>
<div>
{{ status === 'pending' ? 'Loading' : count }}
</div>
</template>
useLazyAsyncData - это зарезервированное имя функции, которое трансформируется компилятором, поэтому вы не должны называть свою собственную функцию useLazyAsyncData.