状态管理
Nuxt提供了强大的状态管理库和useState组合函数，用于创建响应式且适用于SSR的共享状态。
Nuxt提供了useState组合函数，用于在组件之间创建响应式且适用于SSR的共享状态。
useState是一个适用于SSR的ref替代品。它的值将在服务器端渲染后保留（在客户端渲染期间进行hydration），并通过唯一的键在所有组件之间共享。
由于
useState内部的数据将被序列化为JSON，因此重要的是它不包含无法序列化的内容，如类、函数或符号。最佳实践
不要在
这样的状态将在所有访问你网站的用户之间共享，并可能导致内存泄漏！
<script setup>或setup()函数之外定义const state = 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 }}
<button @click="counter++">
+
</button>
<button @click="counter--">
-
</button>
</div>
</template>
Read and edit a live example in Docs > Examples > Features > State Management.
要全局失效缓存的状态，请参阅
clearNuxtState工具。高级用法
在这个示例中，我们使用一个组合函数从HTTP请求头中检测用户的默认语言环境，并将其保存在一个locale状态中。
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 (process.server) {
const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
if (reqLocale) {
locale.value = reqLocale
}
} else if (process.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)))
}
Read and edit a live example in Docs > Examples > Advanced > Locale.
共享状态
通过使用自动导入的组合函数，我们可以定义全局类型安全的状态并在整个应用程序中导入它们。
composables/states.ts
export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')
app.vue
<script setup lang="ts">
const color = useColor() // 与useState('color')相同
</script>
<template>
<p>当前颜色：{{ color }}</p>
</template>
使用第三方库
Nuxt 曾经依赖于Vuex库来提供全局状态管理。如果你正在从Nuxt 2迁移，请参阅迁移指南。
Nuxt对状态管理不持有特定观点，所以请根据你的需求选择合适的解决方案。Nuxt与最流行的状态管理库有多种集成方式，包括：