Что решаешь через ESLint?

Опции useAsyncData в Nuxt.js

useAsyncData - это встроенный хук Nuxt.js для получения данных на сервере и клиенте.

Основные опции

Синтаксис

const { data, pending, error, refresh } = await useAsyncData(
  'uniqueKey', // ключ для кэширования
  async () => {
    return await $fetch('/api/users');
  },
  {
    // Опции
  }
);

Главные опции

1. server (boolean, по умолчанию true)

// Выполнить на сервере при SSR
await useAsyncData('users', () => $fetch('/api/users'), {
  server: true  // Данные загружаются на сервере
});

// Выполнить только на клиенте
await useAsyncData('users', () => $fetch('/api/users'), {
  server: false  // Только браузер
});

2. watch (array)

const page = ref(1);

await useAsyncData(
  'users',
  () => $fetch(`/api/users?page=${page.value}`),
  {
    watch: [page]  // Перезагружать при изменении page
  }
);

3. lazy (boolean)

// Не блокировать навигацию при загрузке
await useAsyncData('users', () => $fetch('/api/users'), {
  lazy: true  // Данные загружаются асинхронно
});

// Эквивалент: useLazyAsyncData()
const { data, pending } = useLazyAsyncData(
  'users',
  () => $fetch('/api/users')
);

4. default (function)

await useAsyncData(
  'users',
  () => $fetch('/api/users'),
  {
    default: () => []  // Дефолтное значение
  }
);

5. transform (function)

await useAsyncData(
  'users',
  () => $fetch('/api/users'),
  {
    transform: (data) => {
      // Трансформировать данные
      return data.map(u => ({...u, fullName: `${u.first} ${u.last}`}));
    }
  }
);

6. pick (array)

await useAsyncData(
  'user',
  () => $fetch('/api/user/123'),
  {
    pick: ['name', 'email']  // Взять только нужные поля
  }
);

7. cache (boolean, по умолчанию true)

// Кэшировать результаты
await useAsyncData('users', () => $fetch('/api/users'), {
  cache: true  // Использовать кэш
});

// Без кэша
await useAsyncData('users', () => $fetch('/api/users'), {
  cache: false  // Всегда заново загружать
});

Полный пример

const { data: users, pending, error, refresh } = await useAsyncData(
  'users-list',
  async () => {
    return await $fetch('/api/users');
  },
  {
    server: true,      // SSR
    lazy: false,       // Блокировать навигацию
    cache: true,       // Кэшировать
    watch: [page],     // Пересчитывать при изменении
    transform: (data) => data.sort((a, b) => a.id - b.id),
    default: () => []  // Дефолт значение
  }
);

Различие с useFetch

// useFetch - проще для простых случаев
const { data } = await useFetch('/api/users');

// useAsyncData - полнее контроля
const { data } = await useAsyncData(
  'key',
  () => $fetch('/api/users'),
  { /* опции */ }
);

Заключение

Основные опции useAsyncData:

• server - выполнить на сервере
• lazy - не блокировать навигацию
• watch - пересчитывать при изменении
• transform - преобразовать данные
• cache - кэшировать результаты
• default - значение по умолчанию