NuxtApp 类

函数	用途	客户端	SSR
useNuxtApp	获取 Nuxt 应用实例	✅	✅
useNuxtData	获取缓存数据引用	✅	✅
useHydration	Hydration 回调	✅	✅

useNuxtApp

获取 Nuxt 应用实例，访问全局状态和功能。

const nuxtApp = useNuxtApp()

// Payload 数据
nuxtApp.payload.data      // useFetch 缓存的数据（按 key）
nuxtApp.payload.state     // useState 缓存的状态（按 key）
nuxtApp.payload.error     // 全局错误信息

// 是否正在 Hydration
nuxtApp.isHydrating       // boolean

// 插件提供的方法
nuxtApp.$myPlugin         // 通过 provide 提供的方法

// 钩子注册
nuxtApp.hook('page:start', () => {})
nuxtApp.hook('page:finish', () => {})
nuxtApp.hook('app:mounted', () => {})

// Vue 实例
nuxtApp.vueApp            // Vue 应用实例

// 运行时配置
nuxtApp.config            // RuntimeConfig

// SSR 相关（仅服务端）
nuxtApp.ssrContext        // SSR 上下文

useNuxtApp 的常见用途

• 在插件中注册钩子
• 访问 Payload 数据
• 判断是否在 Hydration 中
• 获取插件 provide 的方法

常用钩子

钩子	触发时机	用途
page:start	页面加载开始	显示 loading
page:finish	页面加载完成	隐藏 loading
app:mounted	应用挂载完成	初始化客户端逻辑
vue:error	Vue 组件错误	错误上报

useNuxtData

获取 useFetch/useAsyncData 缓存的数据引用，避免重复请求。

// 组件 A：获取数据
const { data } = await useFetch('/api/config', { key: 'app-config' })

// 组件 B：直接访问缓存
const { data: config } = useNuxtData('app-config')
// 不再发请求，直接使用组件 A 的缓存

useNuxtData 的典型场景

• 根组件获取全局配置，子组件通过 useNuxtData 直接使用
• 同一页面中多个组件共享同一份 API 数据

INFO

️ 确保数据已存在：如果 key 对应的数据不存在 data 为 undefined

useHydration

在 Hydration 过程中执行回调，用于在服务端和客户端之间传递数据。

useHydration({
  server() {
    // 服务端执行，返回数据
    return { serverTime: Date.now() }
  },
  client(data) {
    // 客户端 Hydration 时执行
    // data 是服务端返回的数据
    console.log('Server time:', data.serverTime)
  },
})

useHydration 的用途

• 在服务端计算数据，传递给客户端使用
• 传递服务端特有的信息（如请求头中的语言偏好）
• 自定义 Hydration 逻辑

INFO

️ 传递的数据受序列化限制 不能包含函数、Symbol 等。详见 SSR 数据传递