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)
})
}
})
export default defineNuxtPlugin((nuxtApp) => {
const myStore = new MyStore()
useHydration(
'myStoreState',
() => myStore.getState(),
(data) => myStore.setState(data)
)
})
类型
签名
useHydration <T> (key: string, get: () => T, set: (value: T) => void) => void
参数
key: 一个唯一键，用于标识 Nuxt 应用程序中的数据。get: 一个仅在服务器端执行的函数（在 SSR 渲染完成时调用），用于设置初始值。set: 一个仅在客户端执行的函数（在初始 Vue 实例创建时调用），用于接收数据。