nuxt3中的useNuxtApp使用详解

useNuxtApp返回一个nuxtApp实例主要是提供了一个可以访问nuxt的共享运行时的上下文，此上下文在服务端和客户端都存在。上下文(context)里包括: vue app的实例，运行时的钩子(hooks), 运行时的配置变量和内部状态，例如:ssrContext和payload。

在组合工API，插件，组件中都可以使用此实例。
示例：

<!-- app.vue -->
<script setup>
  const nuxtApp = useNuxtApp()
</script>

实例中的方法

`provide (name, value)`

nuxtApp是一个运行时的上下文，你可以通过插件来扩展它。使用provide方法就可以创建nuxt 插件，指定name，就可以在所有的组合式API和组件中通过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)`

使用钩子可以在nuxt 应用的运行时切片(aspects)中添加一些自定义的代码逻辑。你可以在vue.js的组合式API和nuxt插件中使用运行时的钩子，将自定义代码插入到渲染生命周期中的各个环节中。

钩子函数通常用在创建插件的时候，有哪些运行时钩子，可以点击链接查看。

示例如下:

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)`

主动调用钩子。例如：

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

实例中的属性

`vueApp`

vueApp是vue.js应用实例,假如你熟悉vue, 就知道可以通过此实例注册组件、指令，还有安装vue插件。
更多相关内容可以去vue官网了解。

ssrContext

此属性是在服务端的渲染中创建的，也只能在服务端可用。通过此属性，你可以访问如下信息:

url 当前请求的url
event (unjs/h3 请求事件)
payload NuxtApp的payload对象

`payload`

payload包含着在服务端设置的数据和状态变量，客户端可以在浏览器中的window.__NUXT__对象中获取到这些数据和状态。

payload中主要包含如下信息:

serverRendered (boolean) 表示响应的HTML内容(response) 是否是服务端渲染的。
data(Object) 当你使用useFetch或useAsyncData 等接口来获取数据时，结果数据可以在 playload.data中获取到。这些数据被缓存了，如果你再次获取同样的数据时，就会直接从payload.data中获取并返回了。

示例:

export default defineComponent({
  async setup() {
    const { data } = await useAsyncData('count', () => $fetch('/api/count'))
  }
})

上面例子中，第一次调用接口获取数据后，你就可以在payload.data中访问该数据了。当你在客户端通过ssrContext 来访问payload.data时，你可以得到和服务端一样的数据

state(Object) 当你使用useState 组合去设置共享状态时，这个状态数据可以通过payload.state.[name-of-your-state] 方式来获取。

例如:

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

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

`isHydrating`

使用 nuxtApp.isHydrating (boolean) 可以在客户端检查nuxt 应用是否在激活中。

例如:

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

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3中的useNuxtApp使用详解