Обновление данных в Nuxt

Список на странице может устареть: на сервере добавили записи, а пользователь смотрит старый ответ в памяти. Функция useFetch возвращает метод refresh, который повторяет тот же запрос и подменяет data новым результатом.

Давайте разберём страницу работников с кнопкой обновления. Повесим на клик вызов метода refresh без аргументов. Каждое нажатие снова обращается к API по тому же адресу:

<script setup>
	const { data, refresh } = await useFetch(
		'https://jsonplaceholder.typicode.com/users',
	);
</script>
<template>
	<button
		type="button"
		@click="refresh"
	>
		Reload
	</button>
	<ul>
		<li
			v-for="user in data"
			:key="user.id"
		>
			{{ user.name }}
		</li>
	</ul>
</template>

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

Проверьте во вкладке сети браузера, что при нажатии уходит новый запрос к API.