useState

Исходный код
Композабл useState создаёт реактивное общее состояние, совместимое с SSR.

Использование

// Реактивное состояние со значением по умолчанию
const count = useState('counter', () => Math.round(Math.random() * 100))
Узнать больше Docs > 3 X > Getting Started > State Management.
Содержимое useState сериализуется в JSON: не храните классы, функции, символы и другие несериализуемые значения.
useState — зарезервированное имя, обрабатываемое компилятором; свою функцию так называть нельзя.

Сочетание с shallowRef

Если глубокая реактивность не нужна, сочетайте useState с shallowRef — так дешевле при больших объектах и массивах.

const state = useState('my-shallow-state', () => shallowRef({ deep: 'без глубокой реактивности' }))
// isShallow(state) === true

Тип

Signature
export function useState<T> (init?: () => T | Ref<T>): Ref<T>
export function useState<T> (key: string, init?: () => T | Ref<T>): Ref<T>
  • key: уникальный ключ дедупликации между запросами; без ключа сгенерируется ключ по файлу и строке вызова useState.
  • init: ленивая инициализация, если состояние ещё не создано; может вернуть Ref.
  • T: (только TypeScript) тип значения состояния.

Устранение неполадок

Cannot stringify arbitrary non-POJOs

Ошибка возникает, если в useState кладут несериализуемые данные (например, экземпляры классов).

Для классов, которые Nuxt не сериализует из коробки, можно задать свой сериализатор и десериализатор через definePayloadPlugin.

Узнать больше Docs > 3 X > API > Composables > Use Nuxt App#payload.