状态管理
Nuxt 提供强大的状态管理库和 `useState` 组合式 API，用于创建响应式且支持服务器端渲染的共享状态。
Nuxt 提供了 useState 组合式 API，用于在组件之间创建响应式且支持服务器端渲染的共享状态。
useState 是一个支持服务器端渲染的 ref 替代方案。它的值将在服务器端渲染后（客户端水合期间）保留，并通过唯一的键在所有组件之间共享。
因为
useState 内部的 数据将被序列化为 JSON，所以它不能包含任何无法序列化的内容，例如类、函数或符号。最佳实践
切勿在
例如，执行
<script setup> 或 setup() 函数之外定义 const state = ref()。例如，执行
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>
在 文档 > 示例 > 功能 > 状态管理 中读取和编辑实时示例。
要全局使缓存状态失效，请参阅
clearNuxtState 工具函数。初始化状态
大多数情况下，您希望使用异步解析的数据初始化状态。您可以使用带有 callOnce 工具函数的 app.vue 组件来实现。
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>
这类似于 Nuxt 2 中的
nuxtServerInit action，它允许在渲染页面之前在服务器端填充存储的初始状态。与 Pinia 结合使用
在此示例中，我们利用 Pinia 模块 创建全局存储并在整个应用程序中使用它。
确保使用
npx nuxi@latest module add pinia 安装 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)))
}
在 文档 > 示例 > 高级 > Locale 中读取和编辑实时示例。
共享状态
通过使用 自动导入的组合式 API，我们可以定义全局类型安全的状态并在整个应用程序中导入它们。
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() // Same as useState('color')
</script>
<template>
<p>Current color: {{ color }}</p>
</template>
使用第三方库
Nuxt **曾经依赖** Vuex 库来提供全局状态管理。如果您是从 Nuxt 2 迁移过来的，请转到 迁移指南。
Nuxt 对状态管理没有强制要求，因此您可以根据自己的需要选择合适的解决方案。有多个与最流行的状态管理库的集成，包括