useHydration
允许完全控制水合周期，以设置和接收来自服务器的数据。
这是一个高级可组合组件，主要用于插件中，主要被 Nuxt 模块使用。
useHydration 旨在 确保 SSR 期间状态的同步和恢复。如果您需要在 Nuxt 中创建一个全局响应式状态，建议使用 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 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 实例创建时调用），用于接收数据。