Как закэшировать данные в useAsyncData

Для кэширования данных в useAsyncData в Nuxt 3 можно использовать параметр key. При одинаковом key данные будут загружаться только один раз и затем браться из кэша.

const { data } = await useAsyncData(
  'unique-key', // ключ для кэширования
  () => $fetch('/api/data')
)

Дополнительные параметры для управления кэшем:

• lazy: true - не блокировать загрузку страницы
• default: () => ({}) - начальное значение
• transform: (data) => data - трансформация данных после получения

Пример с настройками:

const { data } = await useAsyncData(
  'users-list',
  () => $fetch('/api/users'),
  {
    lazy: true,
    default: () => [],
    transform: (users) => users.map(u => ({ ...u, active: true }))
  }
)