useHydration

原始檔
允許完全控制水合作用週期，以設定和接收來自伺服器的資料。
這是一個高階組合式函式，主要設計用於外掛內部，大部分由 Nuxt 模組使用。
useHydration 旨在 確保 SSR 期間的狀態同步和恢復。如果您需要在 Nuxt 中建立對 SSR 友好的全域性響應式狀態，建議使用 useState。

useHydration 是一個內建的組合式函式，它提供了一種在每次新的 HTTP 請求時在伺服器端設定資料並在客戶端接收該資料的方式。透過這種方式，useHydration 允許您完全控制水合作用週期。

從伺服器上的 get 函式返回的資料儲存在 nuxtApp.payload 中，使用的唯一鍵是提供給 useHydration 的第一個引數。在水合作用期間，此資料隨後在客戶端檢索，從而防止了冗餘計算或 API 呼叫。

使用

export default defineNuxtPlugin((nuxtApp) => {
  const myStore = new MyStore()

  if (import.meta.server) {
    nuxt.hooks.hook('app:rendered', () => {
      nuxtApp.payload.myStoreState = myStore.getState()
    })
  }

  if (import.meta.client) {
    nuxt.hooks.hook('app:created', () => {
      myStore.setState(nuxtApp.payload.myStoreState)
    })
  }
})

型別

簽名
export function useHydration<T> (key: string, get: () => T, set: (value: T) => void): void

引數

  • key：標識 Nuxt 應用程式中資料的唯一鍵。
  • get：僅在伺服器上執行的函式（在 SSR 渲染完成後呼叫）以設定初始值。
  • set：僅在客戶端執行的函式（在建立初始 Vue 例項時呼叫）以接收資料。