学习 Nuxt,包含 100+ 技巧!

useHydration

允许完全控制水合循环,以便从服务器设置和接收数据。

useHydration 是一个内置的组合式函数,提供了一种在每次发出新的 HTTP 请求时在服务器端设置数据,并在客户端接收数据的方法。通过这种方式,useHydration 允许您完全控制水合循环。

这是一个高级组合式函数,主要在内部 (useAsyncData) 或 Nuxt 模块中使用。

类型

签名
useHydration <T> (key: string, get: () => T, set: (value: T) => void) => {}

您可以在组合式函数、插件和组件中使用 useHydration()

useHydration 接受三个参数

  • key: 在您的 Nuxt 应用程序中标识数据的唯一键
    • 类型: 字符串
  • get: 返回用于设置初始值的函数
    • 类型: 函数
  • set: 接收客户端数据的函数
    • 类型: 函数

一旦在服务器端使用 get 函数返回初始数据,您就可以使用在 useHydration 组合式函数中作为第一个参数传递的唯一键,在 nuxtApp.payload 中访问该数据。

更多信息请阅读 文档 > 入门 > 数据获取