Какие есть опции у useAsyncData

«Какие есть опции у useAsyncData» — вопрос из категории Vue, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

useAsyncData в Nuxt.js позволяет асинхронно загружать данные на сервере или клиенте. Основные опции:

  • lazy — откладывает загрузку данных до момента их явного вызова.
  • server — определяет, выполнять ли запрос на сервере (по умолчанию true).
  • default — начальное значение данных до завершения загрузки.
  • transform — функция для преобразования полученных данных.
  • pick — выбирает только указанные поля из ответа.
  • watch — массив реактивных зависимостей для повторного выполнения запроса.

Пример:

const { data, pending } = useAsyncData(
  'users',
  () => $fetch('/api/users'),
  {
    lazy: true,
    transform: (users) => users.map(user => user.name)
  }
);