Состояние между страницами в Nuxt

Общий ключ useState не привязан к одному файлу в app/pages. Пока пользователь ходит по сайту через NuxtLink или программную навигацию, ячейка с этим именем остаётся в памяти клиентского приложения, и новая страница получает ту же ссылку, что и предыдущая.

Покажем корзину: на каталоге добавляем товары в счётчик, на отдельной странице корзины читаем то же число без query параметров и без props через layout.

Страница каталога с кнопкой увеличения:

<script setup>
	const cartCount = useState('cartCount', () => 0);
	
	function addToCart() {
		cartCount.value++;
	}
</script>
<template>
	<h1>
		Catalog
	</h1>
	<p>
		Items in cart: {{ cartCount }}
	</p>
	<button type="button" @click="addToCart">
		Add to cart
	</button>
	<NuxtLink to="/cart">
		Open cart
	</NuxtLink>
</template>

Страница корзины использует тот же ключ. После нескольких нажатий на каталоге переход на /cart показывает накопленное значение:

<script setup>
	const cartCount = useState('cartCount', () => 0);
</script>
<template>
	<h1>
		Cart
	</h1>
	<p>
		Total items: {{ cartCount }}
	</p>
	<NuxtLink to="/catalog">
		Back to catalog
	</NuxtLink>
</template>

Сделайте страницу «Note editor» со строкой ввода и общим ключом для текста заметки. Сохраняйте введённый текст в общее состояние по мере ввода или по кнопке «Save note».

Сделайте вторую страницу «Note view», которая только выводит сохранённую заметку тем же ключом. Проверьте, что текст совпадает после перехода между адресами.