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 实例时调用）以接收数据。