Функция состояния в Nuxt

Повторять один и тот же ключ useState и функции изменения на каждой странице легко перепутать строку или забыть .value. В Nuxt принято складывать такую логику в файлы папки app/composables. Имя файла задаёт функцию, которую Nuxt подставляет без явного import.

Разберём корзину: функция инкапсулирует ключ и действия, страницы вызывают только готовый API.

Файл функции:

export function useCart() {
	const count = useState('cartCount', () => 0);
	
	function addItem() {
		count.value++;
	}
	
	return {
		count,
		addItem,
	};
}

Страница каталога подключает функцию одной строкой в script setup:

<script setup>
	const { count, addItem } = useCart();
</script>
<template>
	<h1>
		Catalog
	</h1>
	<p>
		Cart: {{ count }}
	</p>
	<button type="button" @click="addItem">
		Add item
	</button>
</template>

Страница корзины вызывает ту же функцию и получает ту же ссылку count. Смысл урока - папка composables: общая логика оформляется функцией useИмя и доступна без импорта, как функция useState из ядра Nuxt:

<script setup>
	const { count } = useCart();
</script>
<template>
	<h1>
		Cart
	</h1>
	<p>
		Items: {{ count }}
	</p>
</template>

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

На двух разных страницах вызовите эту функцию без импорта: на одной задайте город, на другой выведите то же значение в заголовке.