useLazyAsyncData
Обёртка над useAsyncData: навигация не ждёт завершения запроса.
useLazyAsyncData — обёртка над useAsyncData, которая запускает навигацию до завершения обработчика за счёт lazy: true.
По умолчанию
useAsyncData блокирует навигацию, пока асинхронный обработчик не завершится. useLazyAsyncData позволяет перейти по маршруту сразу, а загрузка данных продолжается в фоне.Использование
pages/index.vue
<script setup lang="ts">
const { status, data: posts } = await useLazyAsyncData('posts', () => $fetch('/api/posts'))
</script>
<template>
<div>
<div v-if="status === 'pending'">
Загрузка…
</div>
<div v-else-if="status === 'error'">
Ошибка загрузки постов
</div>
<div v-else>
{{ posts }}
</div>
</div>
</template>
С useLazyAsyncData навигация происходит до окончания запроса — состояния pending и error нужно обрабатывать в шаблоне.
useLazyAsyncData — зарезервированное имя компилятора; свою функцию так называть нельзя.Тип
Signature
export function useLazyAsyncData<DataT, ErrorT> (
handler: (ctx?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT>,
): AsyncData<DataT, ErrorT>
export function useLazyAsyncData<DataT, ErrorT> (
key: string,
handler: (ctx?: NuxtApp) => Promise<DataT>,
options?: AsyncDataOptions<DataT>,
): AsyncData<DataT, ErrorT>
Сигнатура совпадает с useAsyncData.
Параметры
Те же, что у useAsyncData, с автоматическим lazy: true.
Возвращаемые значения
Те же, что у 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' ? 'Загрузка…' : count }}
</div>
</template>