nuxt logo

文档翻译(非官方)

useState

useState 组合式函数创建一个响应式且支持 SSR 的共享状态。

使用方法

// 创建一个响应式状态并设置默认值
const count = useState('counter', () => Math.round(Math.random() * 100))
另请参阅 getting-started > state-management

由于 useState 内的数据将被序列化为 JSON,因此重要的是它不应包含任何无法序列化的内容,例如类、函数或符号。

useState 是一个由编译器转换的保留函数名,因此不应将自己的函数命名为 useState

使用 shallowRef

如果不需要状态是深度响应式的,可以将 useStateshallowRef 结合使用。当状态包含大型对象和数组时,这可以提高性能。

const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactive' }))
// isShallow(state) === true

类型

useState<T>(init?: () => T | Ref<T>): Ref<T>
useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
  • key: 一个唯一的键,确保数据获取在请求之间正确去重。如果不提供键,则会为 useState 的实例生成一个唯一的文件和行号键。
  • init: 一个在未初始化时为状态提供初始值的函数。此函数也可以返回一个 Ref
  • T: (仅限 TypeScript)指定状态的类型。