透過超過 100 個技巧提示來學習 Nuxt!

useHydration

允許完全控制 hydration 週期,以設定和接收來自伺服器的資料。

useHydration 是一個內建的 composable,提供一種在每次發出新的 HTTP 請求時於伺服器端設定資料,並在客戶端接收該資料的方法。如此一來,useHydration 允許您完全控制 hydration 週期。

這是一個進階的 composable,主要在內部 (useAsyncData) 或由 Nuxt 模組使用。

Type

signature
useHydration <T> (key: string, get: () => T, set: (value: T) => void) => {}

您可以在 composables、外掛程式和元件中使用 useHydration()

useHydration 接受三個參數

  • key:用於識別 Nuxt 應用程式中資料的唯一鍵
    • Type: String
  • get:傳回值以設定初始資料的函式
    • Type: Function
  • set:接收客戶端資料的函式
    • Type: Function

一旦使用伺服器端的 get 函式傳回初始資料,您就可以在 nuxtApp.payload 中使用在 useHydration composable 中作為第一個參數傳遞的唯一鍵來存取該資料。

文件 > 入門 > 資料擷取 中閱讀更多資訊。