useHydration
Полный контроль над циклом гидратации для передачи и получения данных с сервера.
useHydration — встроенный композабл для передачи данных с сервера при каждом новом HTTP-запросе и получения их на клиенте. Даёт полный контроль над циклом гидратации.
Продвинутый композабл, в основном для плагинов и модулей Nuxt.
useHydration нужен для синхронизации и восстановления состояния при SSR. Для глобального реактивного состояния, совместимого с SSR, рекомендуют useState.Использование
Данные, возвращаемые функцией get на сервере, сохраняются в nuxtApp.payload под ключом (первый аргумент useHydration). При гидрации они читаются на клиенте, без повторных вычислений или запросов.
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)
})
}
})
Тип
Signature
export function useHydration<T> (key: string, get: () => T, set: (value: T) => void): void
Параметры
| Parameter | Тип | Описание |
|---|---|---|
key | string | Уникальный ключ данных в приложении Nuxt. |
get | () => T | Функция, вызываемая только на сервере (после завершения SSR) — задаёт начальное значение. |
set | (value: T) => void | Функция, вызываемая только на клиенте (при создании экземпляра Vue) — получает данные. |
Возвращаемые значения
Композабл ничего не возвращает.