通过 100+ 个技巧学习 Nuxt!

useState

useState 组合式函数创建一个响应式的、对服务器端渲染友好的共享状态。

用法

// Create a reactive state and set default value
const count = useState('counter', () => Math.round(Math.random() * 100))
请阅读 文档 > 入门 > 状态管理 中的更多信息。
由于 useState 内部的数据会被序列化为 JSON,因此重要的是它不包含任何无法序列化的内容,例如类、函数或符号。
useState 是一个被编译器转换的保留函数名,因此你不应该将自己的函数命名为 useState
观看 Alexander Lichter 关于为什么以及何时使用 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) 指定状态的类型