Ответ
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)
}
);Ответ 18+ 🔞
Смотри, вот тебе про useAsyncData в Nuxt, чтоб ты не тупил, как Герасим, когда ему про Муму объясняли.
Это, блядь, такая штука, чтобы данные подгружать — на сервере или уже в браузере. Не просто так, а с умом, чтобы не ебашить запросы куда попало.
Основные её прибамбасы, на которые смотреть надо:
lazy— это когда она, хитрая жопа, не лезет за данными сразу, а ждёт, пока ты её явно не позовёшь. Ленивая, сука, но иногда полезная.server— тут всё просто: грузить на сервере или нет? По дефолтуtrue, то есть да, грузи, ёпта, сразу при рендере страницы.default— чем данные заполнить, пока они, блядь, ещё не приехали. Чтобы не светилось пустое место, как мозги у иного разработчика.transform— вот это мощь! Получил ты, допустим, овердохуища полей, а тебе надо только имена. Тык сюда функцию — она как волшебная палочка, отфильтрует всё лишнее.pick— если лень функцию вtransformписать, можно просто поля указать, какие выдрать из ответа. Удобно, блядь.watch— смотри, вот реактивная переменная поменялась — и запрос пошёл заново. Автоматом, ёбана! Как будто кто-то тебя в спину толкнул.
Ну и смотри, как это в коде выглядит, чтоб не быть полупидором, который только в документацию тыкает:
const { data, pending } = useAsyncData(
'users',
() => $fetch('/api/users'),
{
lazy: true,
transform: (users) => users.map(user => user.name)
}
);Вот, видишь? Ключ 'users' дали, функцию, которая фетчит, и настройки. lazy: true — не лезет сразу. А transform выковыривает только имена из массива пользователей. Красота, блядь, а не инструмент! Главное — понять, что к чему, а не тыкать наугад, как слепой крот.