useHydration
允许完全控制 hydration 周期，以便从服务器设置和接收数据。
这是一个高级的可组合函数，主要设计用于插件中，通常由 Nuxt 模块使用。
useHydration 旨在确保在 SSR 期间状态的同步和恢复。如果您需要在 Nuxt 中创建一个对 SSR 友好的全局响应式状态，推荐使用 useState。
useHydration 是一个内置的可组合函数，它提供了一种在每次新的 HTTP 请求时在服务器端设置数据并在客户端接收该数据的方法。通过这种方式，useHydration 允许您完全控制 hydration 周期。
从服务器上的 get 函数返回的数据存储在 nuxtApp.payload 中，使用 useHydration 的第一个参数提供的唯一键。在 hydration 期间，这些数据会在客户端检索，防止冗余计算或 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)
})
}
})
类型
signature
useHydration <T> (key: string, get: () => T, set: (value: T) => void) => void
参数
key: 标识 Nuxt 应用程序中数据的唯一键。get: 仅在服务器上执行的函数（在 SSR 渲染完成时调用）以设置初始值。set: 仅在客户端上执行的函数（在初始 vue 实例创建时调用）以接收数据。