Общее состояние в Nuxt

Когда два блока на одной странице должны показывать и менять одно и то же число, локальной переменной в родителе мало: каждый дочерний файл пришлось бы связывать вручную. В Nuxt для общего состояния служит функция useState. Первый аргумент - строковый ключ, второй задаёт, с чего начать, если ячейки ещё нет; подробности увидим в коде ниже.

Все вызовы с одним ключом получают одну реактивную ссылку: изменение в одном компоненте сразу видно в другом. Ключ - это имя «ячейки» в памяти приложения, по нему Nuxt находит уже созданное значение или создаёт новое при первом обращении.

Сделаем страницу со счётчиком и двумя дочерними компонентами, которые читают один ключ pageClicks:

<script setup>
</script>
<template>
	<h1>
		Shared counter
	</h1>
	<CounterRead />
	<CounterButton />
</template>

Первый компонент только выводит число:

<script setup>
	const clicks = useState('pageClicks', () => 0);
</script>
<template>
	<p>
		Clicks: {{ clicks }}
	</p>
</template>

Второй увеличивает то же состояние по тому же ключу. Строки import для функции не нужны: Nuxt подставляет его автоматически, а менять число следует через .value, как у реактивной ссылки:

<script setup>
	const clicks = useState('pageClicks', () => 0);
	
	function addClick() {
		clicks.value++;
	}
</script>
<template>
	<button type="button" @click="addClick">
		Add click
	</button>
</template>

Сделайте страницу каталога товаров с двумя компонентами: один выводит число избранных позиций, второй увеличивает его на единицу по кнопке. Используйте общий ключ, отличный от pageClicks.

Добавьте на ту же страницу третий компонент с подписью «Favorites total» и тем же ключом, чтобы все три блока показывали одно значение без props.