Question

是一个内置的可组合项，它提供了一种访问 Nuxt 的共享运行时上下文的方法，它在客户端和服务器端都可用

useNuxtApp

它可以帮助您访问 Vue 应用程序实例、运行时挂钩、运行时配置变量和内部状态，例如 ssrContext 和 payload。

您可以在可组合项、插件和组件中使用 useNuxtApp() 。

app.vue

<script setup>
  const nuxtApp = useNuxtApp()
</script>

方法

provide (name, value)

useNuxtApp() 公开了以下属性，您可以使用这些属性来扩展和自定义您的应用程序以及共享状态、数据和变量。

vueApp

vueApp 是您可以通过 nuxtApp 访问的全局 Vue.js 应用程序实例。 一些有用的方法：

• component() 是 Vue.js 提供的全局方法之一。如果同时传入一个名称字符串和组件定义，它会注册一个全局组件。如果只传递名称，则会检索已经注册的组件。这使得可以在应用程序的任何地方使用该组件，而不必在每个需要使用该组件的组件中进行导入。 vue中文档
• directive() 方法可以用来注册全局自定义指令或者获取已经注册的指令，它接收一个指令名称和一个指令定义对象作为参数。如果只传递了指令名称示例，那么该方法将返回该名称对应的指令定义对象。 vue中文档
• use() 安装一个Vue.js 插件 / 示例 / vue中文档

相关阅读：https://vuejs.org/api/application.html

ssrContext

是在服务器端渲染时生成的，它只在服务器端可用。 Nuxt 通过以下方式暴露了以下属性

• url（字符串）- 当前请求 url。
• event（unjs/h3 请求事件）- 访问当前请求的 req 和 res 对象。
• payload (object) - NuxtApp 有效载荷对象。

payload

payload 从服务器端向客户端公开数据和状态变量。 从服务器端传递后，以下密钥将在客户端可用：

• serverRendered（布尔值）- 指示响应是否是服务器端呈现的。
• data（对象）- 当您使用 useFetch 或 useAsyncData 从 API 端点获取数据时，可以从 payload.data 访问生成的有效负载。 此数据已缓存，可帮助您防止在多次发出相同请求的情况下获取相同的数据。

app.vue

<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>

在上面的示例中使用 useAsyncData 获取 count 的值后，如果您访问 payload.data ，您将看到那里记录了 { count: 1 } 。 每当页数增加时，count 的值就会更新。

从 ssrcontext 访问相同的 payload.data 时，您也可以在服务器端访问相同的值。

• state (object) - 当您在 Nuxt 中使用 useState 可组合设置共享状态时，可以通过 payload.state.[name-of-your-state] 访问此状态数据。

plugins/my-plugin.ts

export const useColor = () => useState<string>('color', () => 'pink')

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    const color = useColor()
  }
})

通常 payload 必须只包含纯 JavaScript 对象。 但通过设置 experimental.renderJsonPayloads，可以使用更高级的类型，例如 ref、reactive、shallowRef``、shallowReactive 和 NuxtError。

您还可以使用特殊的插件帮助程序添加自己的类型：

plugins/custom-payload.ts

  /**
   * 这种插件在 Nuxt 生命周期的早期运行，在我们恢复有效负载之前。
   * 您将无权访问路由器或其他 Nuxt 注入的属性。
   */
export default definePayloadPlugin((nuxtApp) => {
  definePayloadReducer('BlinkingText', data => data === '<blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<blink>')
})

isHydrating

使用 nuxtApp.isHydrating（布尔值）检查 Nuxt 应用程序是否在客户端进行补水。

示例:

components/nuxt-error-boundary.ts

export default defineComponent({
  setup (_props, { slots, emit }) {
    const nuxtApp = useNuxtApp()
    onErrorCaptured((err) => {
      if (process.client && !nuxtApp.isHydrating) {
        // ...
      }
    })
  }
})