Преобразование данных в Nuxt

API часто отдаёт большие объекты, а на странице нужны одни подписи или числа. Функция useAsyncData принимает объект опций; функция transform получает сырой ответ обработчика и возвращает то, что попадёт в data и в шаблон.

Давайте познакомимся со списком имён пользователей. Загрузим полные записи, а в transform оставим только поле name:

<script setup>
	const { data } = await useAsyncData(
		'user-names',
		() => $fetch(
			'https://jsonplaceholder.typicode.com/users',
		),
		{
			transform: (users) => users.map(
				(user) => user.name,
			),
		},
	);
</script>
<template>
	<ul>
		<li
			v-for="name in data"
			:key="name"
		>
			{{ name }}
		</li>
	</ul>
</template>

В data теперь массив строк, а не массив объектов с id, email и адресом. Шаблон проще, а лишние поля не утекут в разметку и в payload для клиента.

Тот же приём работает для любого JSON, который вернул обработчик: transform выполняется после успешной загрузки и до сохранения результата под ключом.

Сделайте страницу /products, которая запрашивает товары с тестового API и через transform оставляет в data только цены, выведенные списком чисел.

Сделайте страницу /posts, где из ответа JSONPlaceholder в data попадают только заголовки постов, без текста и идентификаторов авторов.