Управление состоянием
Nuxt предоставляет композабл useState для создания реактивного и SSR-совместимого общего состояния между компонентами.
useState - SSR-совместимая замена ref. Его значение будет сохранено после сервернего рендеринга (во время гидратации на клиенте) и доступно среди всех компонентов, используя уникальный ключ.
useState будут сериализованы в JSON, важно, чтобы эти данные не содержали ничего, что не может быть сериализовано, например классы, функции или символы.Лучшие практики
const state = ref() вне <script setup> и setup() функции.Например, выполнение команды
export myState = ref({}) приведет к тому, что состояние будет разделяться между запросами на сервере и может привести к утечке памяти.const useX = () => useState('x')Примеры
Базовое использование
В этом примере мы используем внутрикомпонентное состояние счетчика. Любые другие компоненты, использующие useState('counter'), разделяют то же реактивное состояние.
<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>
clearNuxtState.Инициализация состояния
Зачастую, вы захотите инициализировать ваше состояние данными, которые разрешаются асинхронно. Вы можете использовать компонент app.vue с утилитой callOnce, чтобы сделать это.
<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, который позволяет наполнить первичное состояние вашего хранилища на стороне сервера перед рендерингом страницы.Использование с 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)))
}
Общее состояние
Используя авто-импортируемые композаблы, мы можем определить глобальные типобезопасные состояния и импортировать их по всему приложению.
export const useColor = () => useState<string>('color', () => 'pink')
<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>
Использование сторонних библиотек
Nuxt раньше полагался на библиотеку Vuex для обеспечения глобального управления состоянием. Если вы мигрируете с Nuxt 2, пожалуйста, обратитесь к руководству по миграции.
Nuxt не устанавливает правил управлением состоянием, так что свободно выбирайте подходящее решение для ваших нужд. Существует несколько интеграций с наиболее популярными библиотеками для управления состоянием, включая: