Сброс данных в Nuxt

Функция useFetch кладёт ответ в общий кэш payload под ключом. По умолчанию ключ строится из URL, и не всегда удобно угадать его строку. Опция key задаёт имя явно, чтобы сбросить именно этот запрос. Для очистки в Nuxt есть функция clearNuxtData: она убирает сохранённые данные по переданному имени, и следующий запрос выполняется заново.

Давайте разберём страницу пользователей с ключом users и кнопкой сброса:

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

Сделайте страницу постов с ключом posts и кнопкой, которая сбрасывает кэш этого списка.

Сделайте страницу заказов с собственным ключом payload и кнопкой очистки перед повторной загрузкой.