使用运行时上下文 useNuxtApp

useNuxtApp

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

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

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

方法

provide (name, value)

nuxtApp 是一个运行时上下文，您可以使用 Nuxt 插件 对其进行扩展。 使用 provide 函数创建 Nuxt 插件，使值和辅助方法在您的 Nuxt 应用程序中跨所有可组合项和组件可用。

provide 函数接受 name 和 value 参数。

示例:

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', name => `Hello ${name}!`)

// Prints "Hello name!"
console.log(nuxtApp.$hello('name'))

正如您在上面的示例中看到的，$hello 已成为 nuxtApp 上下文的新自定义部分，并且在可访问 nuxtApp 的所有地方都可用。

hook(name, cb)

nuxtApp 中可用的挂钩允许您自定义 Nuxt 应用程序的运行时方面。 您可以在 Vue.js 可组合项和 Nuxt 插件 中使用运行时挂钩来挂钩渲染生命周期。

hook 函数对于通过在特定点挂钩到渲染生命周期来添加自定义逻辑很有用。 hook 函数主要用于创建 Nuxt 插件。

有关 Nuxt 调用的可用运行时挂钩，请参阅 Runtime Hooks。

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', () => {
    /* your code goes here */
  })
  nuxtApp.hook('vue:error', (..._args) => {
    console.log('vue:error')
    // if (process.client) {
    //   console.log(..._args)
    // }
  })
})

callhook(name, ...args)

当使用任何现有挂钩调用时，callHook 会返回一个承诺。

await nuxtApp.callHook('my-plugin:init')

属性

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

vueApp

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

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

ssrContext

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

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

payload

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

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

<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] 访问此状态数据。

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

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

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

isHydrating

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

示例:

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