useHydration
允许完全控制水合（Hydration）周期，以从服务器设置和接收数据。
useHydration 是一个内置组合式函数，它提供了一种在每次进行 HTTP 请求时在服务器端设置数据，并在客户端接收该数据的方法。通过这种方式，useHydration 使您能够完全控制水合周期。
这是一个高级组合式函数，主要设计用于插件内部，多被 Nuxt 模块使用。
useHydration 旨在确保 SSR 期间的状态同步与恢复。如果您需要在 Nuxt 中创建一个对 SSR 友好的全局响应式状态，推荐使用 useState。使用
服务器端 get 函数返回的数据会存储在 nuxtApp.payload 中，并使用作为 useHydration 第一个参数提供的唯一键名进行标识。在水合过程中，这些数据会在客户端被提取，从而避免冗余的计算或 API 调用。
export default defineNuxtPlugin((nuxtApp) => {
const myStore = new MyStore()
useHydration(
'myStoreState',
() => myStore.getState(),
data => myStore.setState(data),
)
})
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 | string | 一个唯一键名，用于标识 Nuxt 应用中的数据。 |
get | () => T | 一个仅在服务器端执行的函数（在 SSR 渲染完成时调用），用于设置初始值。 |
set | (value: T) => void | 一个仅在客户端执行的函数（在初始 Vue 实例创建时调用），用于接收数据。 |
返回值
该组合式函数不返回任何值。