Learn Nuxt with a Collection of 100+ Tips!

Управление состоянием

Nuxt предоставляет мощные библиотеки для управления состоянием и композабл useState для создания реактивного и SSR-совместимого общего состояния.

Nuxt предоставляет композабл useState для создания реактивного и SSR-совместимого общего состояния между компонентами.

useState - SSR-совместимая замена ref. Его значение будет сохранено после сервернего рендеринга (во время гидратации на клиенте) и доступно среди всех компонентов, используя уникальный ключ.

Посмотрите видео от Александра Лихтера о том, почему и когда использовать useState().
Из-за того, что данные внутри useState будут сериализованы в JSON, важно, чтобы эти данные не содержали ничего, что не может быть сериализовано, например классы, функции или символы.
Прочитайте больше про композабл useState.

Лучшие практики

Никогда не объявляйте const state = ref() вне <script setup> и setup() функции.
Например, выполнение команды export myState = ref({}) приведет к тому, что состояние будет разделяться между запросами на сервере и может привести к утечке памяти.
Вместого этого используйте const useX = () => useState('x')

Примеры

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

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

app.vue
<script setup lang="ts">
const 
counter
=
useState
('counter', () =>
Math
.
round
(
Math
.
random
() * 1000))
</script> <template> <
div
>
Counter: {{
counter
}}
<
button
@
click
="
counter
++">
+ </
button
>
<
button
@
click
="
counter
--">
- </
button
>
</
div
>
</template>
Прочитайте и отредактируйте живой пример в Docs > Examples > Features > State Management.
Для глобальной инвалидации кэшированного состояния, смотрите clearNuxtState.

Инициализация состояния

Зачастую, вы захотите инициализировать ваше состояние данными, которые разрешаются асинхронно. Вы можете использовать компонент app.vue с утилитой callOnce, чтобы сделать это.

app.vue
<script setup lang="ts">
const 
websiteConfig
=
useState
('config')
await
callOnce
(async () => {
websiteConfig
.
value
= await
$fetch
('https://my-cms.com/api/website-config')
}) </script>
Это схоже с экшеном nuxtServerInit в Nuxt 2, который позволяет наполнить первичное состояние вашего хранилища на стороне сервера перед рендерингом страницы.
Узнать больше Docs > API > Utils > Call Once.

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

В этом примере мы применим модуль Pinia, чтобы создать глобальное хранилищие и использовать его во всем приложении.

Убедитесь, что модуль Pinia установлен с помощью npx nuxi@latest module add pinia, или следуйте этапам установки модуля.
export const useWebsiteStore = defineStore('websiteStore', {
  state: () => ({
    name: '',
    description: ''
  }),
  actions: {
    async fetch() {
      const infos = await $fetch('https://api.nuxt.com/modules/pinia')

      this.name = infos.name
      this.description = infos.description
    }
  }
})

Расширенное использование

import type { Ref } from 'vue'

export const useLocale = () => {
  return useState<string>('locale', () => useDefaultLocale().value)
}

export const useDefaultLocale = (fallback = 'en-US') => {
  const locale = ref(fallback)
  if (import.meta.server) {
    const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
    if (reqLocale) {
      locale.value = reqLocale
    }
  } else if (import.meta.client) {
    const navLang = navigator.language
    if (navLang) {
      locale.value = navLang
    }
  }
  return locale
}

export const useLocales = () => {
  const locale = useLocale()
  const locales = ref([
    'en-US',
    'en-GB',
    ...
    'ja-JP-u-ca-japanese'
  ])
  if (!locales.value.includes(locale.value)) {
    locales.value.unshift(locale.value)
  }
  return locales
}

export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
  return computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: 'full' }).format(unref(date)))
}
Прочитайте и отредактируйте живой пример в Docs > Examples > Advanced > Locale.

Общее состояние

Используя авто-импортируемые композаблы, мы можем определить глобальные типобезопасные состояния и импортировать их по всему приложению.

composables/states.ts
export const 
useColor
= () =>
useState
<string>('color', () => 'pink')
app.vue
<script setup lang="ts">
// ---cut-start---
const useColor = () => useState<string>('color', () => 'pink')
// ---cut-end---
const color = useColor() // Тоже что и useState('color')
</script>

<template>
  <p>Current color: {{ color }}</p>
</template>
Посмотрите видео от Дэниела Ро о том, как иметь дело с глобальным состоянием и SSR в Nuxt.

Использование сторонних библиотек

Nuxt раньше полагался на библиотеку Vuex для обеспечения глобального управления состоянием. Если вы мигрируете с Nuxt 2, пожалуйста, обратитесь к руководству по миграции.

Nuxt не устанавливает правил управлением состоянием, так что свободно выбирайте подходящее решение для ваших нужд. Существует несколько интеграций с наиболее популярными библиотеками для управления состоянием, включая:

  • Pinia - официальная рекомендация от Vue
  • Harlem - управление неизменяемым глобальным состоянием
  • XState - подход конечного автомата с инструментами для визуализации и тестирования вашей логики состояний