useHydration

Source
允许对 hydration 周期进行完全控制，以便从服务器设置和接收数据。

useHydration is a built-in composable that provides a way to set data on the server side every time a new HTTP request is made and receive that data on the client side. This way useHydration allows you to take full control of the hydration cycle.

这是一个高级的 composable，主要用于插件内，并且大多由 Nuxt 模块使用。
useHydration 的设计目的是用于 确保 SSR 期间的状态同步与恢复。如果你需要在 Nuxt 中创建一个全局的、对 SSR 友好的响应式状态，推荐使用 useState。

用法

服务器上 get 函数返回的数据会根据作为 useHydration 第一个参数提供的唯一键，存储在 nuxtApp.payload 中。在水合过程中，这些数据会在客户端被检索，从而避免重复计算或 API 调用。

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

  useHydration(
    'myStoreState',
    () => myStore.getState(),
    data => myStore.setState(data),
  )
})

类型

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

参数

参数类型描述
keystring唯一键，用于标识 Nuxt 应用中的数据。
get() => T仅在服务器上执行的函数（在 SSR 渲染完成时调用），用于设置初始值。
set(value: T) => void仅在客户端执行的函数（在初始 Vue 实例创建时调用），用于接收数据。

返回值

此可组合项不返回任何值。