useState в Nuxt: простой способ хранить состояние без сторов

Nuxt предоставляет мощный набор встроенных composables для работы с данными и состоянием. Один из самых часто используемых — это useState. Он позволяет создавать реактивное состояние, которое безопасно работает как на клиенте, так и на сервере (SSR/SSG).

С помощью useState можно легко делиться данными между компонентами без необходимости подключать сторонние библиотеки вроде Vuex или Pinia — удобно для небольших и средних приложений.

Что такое useState

useState — это функция, которая создаёт реактивное значение (Ref) и сохраняет его в контексте Nuxt.

Ключевые особенности:

• Значение синхронизируется между сервером и клиентом.
• Состояние разделяется между компонентами по ключу.
• Начальное значение задаётся только при первом создании состояния.
• Работает в любом месте, где доступны composables.

Сигнатура

useState<T>(key?: string, init?: () => T | Ref<T>): Ref<T>

• key — строка-идентификатор состояния. Если не указать, Nuxt сгенерирует уникальный ключ автоматически.
• init — функция, возвращающая начальное значение. Вызывается только один раз.

Важно: данные должны быть сериализуемыми в JSON.

Примеры использования

1. Счётчик

<script setup lang="ts">
const counter = useState<number>('counter', () => 0)

function increment() {
  counter.value++
}
</script>

<template>
  <div>
    <p>Счётчик: {{ counter }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

В любом компоненте, где будет вызван useState('counter'), значение будет одно и то же.

2. Список задач

const todos = useState('todos', () => [
  { id: 1, text: 'Купить хлеб', done: false }
])

function addTodo(text: string) {
  todos.value.push({ id: Date.now(), text, done: false })
}

3. Автоматический ключ

const message = useState(() => 'Привет, мир!')

Nuxt сам сгенерирует уникальный ключ на основе места вызова.

4. Работа с асинхронными данными

export const useUser = () => useState('user', () => null)

<script setup lang="ts">
const user = useUser()

onMounted(async () => {
  if (!user.value) {
    user.value = await $fetch('/api/user')
  }
})
</script>

Когда использовать useState

Подходит:

• для небольших состояний, которые нужны в нескольких компонентах;
• когда не требуется сложная архитектура стора;
• когда важна простота и SSR-совместимость.

Лучше использовать Pinia или другой стор:

• если данных становится много;
• если нужна модульность, плагины, строгая структура.

Советы и подводные камни

• Сериализация: храните только JSON-сериализуемые данные.
• Уникальность ключей: избегайте случайных совпадений имён.
• Глубокая реактивность: для больших структур можно использовать shallowRef.
• Сохранение состояния: useState переживает переходы между страницами — очищайте вручную, если это нежелательно.

Заключение

useState — лёгкий и удобный способ управлять состоянием в Nuxt. Он идеально подходит для простых сценариев: счётчики, формы, временные данные, кеширование.

Если проект растёт, useState можно использовать параллельно с Pinia: Pinia — для сложных данных, useState — для быстрых и локальных решений.

Таким образом, useState остаётся универсальным инструментом для управления состоянием и отлично вписывается в экосистему Nuxt.