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