Nuxt mid-level certification launch date announced!

useLazyAsyncData

Это обертка вокруг useAsyncData запускает навигацию немедленно.

Описание

По умолчанию, useAsyncData блокирует навигацию до тех пор, пока его асинхронный обработчик не будет разрешен. useLazyAsyncData предоставляет обертку useAsyncData, которая запускает навигацию до разрешения обработчика, установив опцию lazy в true.

useLazyAsyncData имеет ту же сигнатуру, что и useAsyncData.
Узнать больше Docs > API > Composables > Use Async Data.

Пример

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.
Узнать больше Docs > Getting Started > Data Fetching.