useState

Source
Компосабл useState создаёт реактивное и SSR-совместимое общее состояние.

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

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

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

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

const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactive' }))
// 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 > 4 X > API > Composables > Use Nuxt App#payload.