useState

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

用法

// 创建一个响应式状态并设置默认值
const count = useState('counter', () => Math.round(Math.random() * 100))
Read more in Docs > 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)指定状态的类型。