状态管理
Nuxt 提供了强大的状态管理库和 useState composable，用来创建响应式、SSR 友好的共享状态。
Nuxt 提供了 useState composable，用来在组件间创建响应式、SSR 友好的共享状态。
useState 是一个 SSR 友好的 ref 替代品。它的值在服务端渲染后（客户端水合期间）会被保留，并通过唯一 key 在所有组件间共享。
因为 useState 中的数据会被序列化为 JSON，所以不能包含任何无法序列化的内容，比如类、函数或 Symbol。
阅读更多关于 useState composable 的内容。
最佳实践
永远不要在 <script setup> 或 setup() 函数外部定义 const state = ref()。
比如，写 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 }}
<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>
这类似于 Nuxt 2 中的 nuxtServerInit action，允许在渲染页面之前在服务端填充 store 的初始状态。
配合 Pinia 使用
这个例子中，我们使用 Pinia 模块 创建一个全局 store，并在整个应用中使用。
确保先用 npx nuxt 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
},
},
})
<script setup lang="ts">
const website = useWebsiteStore()
await callOnce(website.fetch)
</script>
<template>
<main>
<h1>{{ website.name }}</h1>
<p>{{ website.description }}</p>
</main>
</template>
进阶用法
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)))
}
<script setup lang="ts">
const locales = useLocales()
const locale = useLocale()
const date = useLocaleDate(new Date('2016-10-26'))
</script>
<template>
<div>
<h1>Nuxt 生日</h1>
<p>{{ date }}</p>
<label for="locale-chooser">预览其他语言</label>
<select
id="locale-chooser"
v-model="locale"
>
<option
v-for="loc of locales"
:key="loc"
:value="loc"
>
{{ loc }}
</option>
</select>
</div>
</template>
共享状态
通过使用自动导入的 composables，我们可以定义全局类型安全的状态，并在整个应用中导入使用。
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>当前颜色: {{ color }}</p>
</template>
使用第三方库
Nuxt 过去依赖 Vuex 库来提供全局状态管理。如果你正在从 Nuxt 2 迁移，请参考迁移指南。
Nuxt 对状态管理不做强制要求，你可以自由选择适合自己需求的方案。有多个流行状态管理库的集成：