Learn Nuxt with a Collection of 100+ Tips!
54.1K

useState

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

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

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

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

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

const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactive' }))
// isShallow(state) === true

Тип

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

useServerSeoMeta

Композабл useServerSeoMeta позволяет определить SEO-метатеги вашего сайта в виде плоского объекта с полной поддержкой TypeScript.

$fetch

Nuxt использует ofetch для предоставления глобально хелпера $fetch для выполнения HTTP-запросов.