Введение в состояние в Nuxt

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

У настоящего сайта часто нужно другое. Сколько товаров лежит в корзине, какой город выбран в шапке, сколько раз нажали «избранное» на карточке - эти числа и строки должны быть одинаковыми на главной, в каталоге и на странице оформления заказа. Меню из NuxtLink переводит между страницами, а общая информация не должна обнуляться при каждом переходе.

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

Обычная реактивная переменная в script setup одной страницы привязана к этому файлу. Когда пользователь уходит на другой роут, компонент страницы размонтируется, и локальное значение исчезает. Ссылка, созданная только внутри одной страницы, не переживает такой переход. Два соседних блока на одной странице увидят одно число только если мы явно передадим его через props или поднимем выше по дереву - для каждой новой пары компонентов придётся тянуть провода заново.

Функция useState в Nuxt решает другую задачу: одно имя ключа хранит одну копию значения для всего приложения. Пока ключ тот же, счётчик корзины или текст заметки не сбрасывается при смене адреса и совпадает у компонентов, которые обращаются к этой ячейке.

В Nuxt страница сначала собирается на сервере, отдаётся браузеру как HTML, а затем на клиенте к тому же приложению подключается интерактивность. Если счётчик или корзина живут только в памяти одного экземпляра компонента на сервере, после гидратации в браузере может появиться второй независимый экземпляр с другим начальным значением. Нужен механизм, который связывает одно и то же имя состояния и на сервере, и в браузере, и переживает навигацию между app/pages.

В высшем учебнике мы будем опираться на встроенный в Nuxt способ хранить такие общие значения без отдельного хранилища сторонних библиотек. Он работает поверх Composition API, подхватывается автоимпортом так же, как useFetch и useRoute, и рассчитан на типичные сценарии сайта: корзина, заметка между экранами, счётчик избранного, выбранный город в шапке макета из app/layouts.

Примеры раздела остаются на JavaScript в структуре Nuxt 4 с app/app.vue, NuxtLayout и NuxtPage, как в основном учебнике. Мы не подключаем отдельные библиотеки для глобального хранилища - достаточно средств самого фреймворка и привычных страниц в app/pages.