useState

源文件
useState composable 创建一个响应式且对 SSR 友好的共享状态。

使用

// Create a reactive state and set default value
const count = useState('counter', () => Math.round(Math.random() * 100))
在 文档 > 4 X > 入门 > 状态管理 中阅读更多内容。
由于 useState 中的数据将被序列化为 JSON，因此它不应包含任何无法序列化的内容（如类、函数或 Symbol）这一点非常重要。
useState 是一个被编译器转换的保留函数名，因此您不应将自己的函数命名为 useState。

使用 shallowRef

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

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

类型

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

故障排除

无法对任意非 POJO 进行字符串化

当您尝试使用 useState 存储不可序列化的有效负载（例如类实例）时，会发生此错误。

如果您想将 Nuxt 不支持的类实例与 useState 一起存储，您可以使用 definePayloadPlugin 添加一个自定义的序列化器和反序列化器来处理您的类。

在 文档 > 4 X > API > Composables > Use Nuxt App#payload 中阅读更多内容。