useState

原始檔
useState 可組合項建立了一個響應式的、對 SSR 友好的共享狀態。

使用

// Create a reactive state and set default value
const count = useState('counter', () => Math.round(Math.random() * 100))
在文件 > 4.x > 入門 > 狀態管理中瞭解更多。
因為 useState 中的資料將被序列化為 JSON，所以它不能包含任何無法序列化的內容，例如類、函式或符號。
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：一個唯一的鍵，確保跨請求的資料獲取正確去重。如果你不提供鍵，那麼將為你生成一個在檔案和 useState 例項的行號上唯一的鍵。
  • init：一個函式，在狀態未初始化時提供初始值。這個函式也可以返回一個 Ref。
  • T：（僅限 TypeScript）指定狀態的型別