Обновление страницы в Nuxt

Страница часто тянет список или карточку через useFetch или useAsyncData. Пока пользователь не уходит с адреса, результат лежит в реактивных переменных компонента. Если на сервере данные уже изменились, а экран всё ещё показывает старый ответ, не обязательно обновлять всю вкладку браузера.

Давайте разберём функцию refreshNuxtData. Она просит Nuxt снова выполнить запросы данных, привязанные к текущей странице. После вызова обновятся значения из useFetch и useAsyncData на этом экране, разметка перерисуется с новым содержимым. Это не полный перезапуск приложения и не сброс всего состояния сайта.

Страница пользователей загрузит список с тестового API и даст кнопку обновления:

<script setup>
	const { data: users, pending } = await useFetch(
		'https://jsonplaceholder.typicode.com/users',
	);
	
	function reloadUsers() {
		refreshNuxtData();
	}
</script>
<template>
	<h1>
		Users
	</h1>
	<button type="button" @click="reloadUsers">
		Refresh list
	</button>
	<p v-if="pending">
		Loading...
	</p>
	<ul v-else>
		<li v-for="user in users" :key="user.id">
			{{ user.name }}
		</li>
	</ul>
</template>

По нажатию «Refresh list» снова пойдёт запрос к jsonplaceholder.typicode.com, список имён обновится. В режиме npm run dev можно временно отключить сеть в инструментах разработчика и убедиться, что pending снова показывает загрузку на время повторного запроса.

Сделайте страницу каталога со списком продуктов с сервера и кнопкой, которая заново загружает этот список на месте.

Сделайте страницу заказов с кнопкой «Reload orders», после которой на экране появляются актуальные записи без перезагрузки вкладки.