nuxt3中的useNuxtApp使用詳解

useNuxtApp返回一個(gè)nuxtApp實(shí)例主要是提供了一個(gè)可以訪問(wèn)nuxt的共享運(yùn)行時(shí)的上下文，此上下文在服務(wù)端和客戶端都存在。上下文(context)里包括: vue app的實(shí)例，運(yùn)行時(shí)的鉤子(hooks), 運(yùn)行時(shí)的配置變量和內(nèi)部狀態(tài)，例如:ssrContext和payload。

在組合工API，插件，組件中都可以使用此實(shí)例。
示例：

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

實(shí)例中的方法

provide (name, value)

nuxtApp是一個(gè)運(yùn)行時(shí)的上下文， 你可以通過(guò)插件來(lái)擴(kuò)展它。使用provide方法就可以創(chuàng)建nuxt 插件，指定name，就可以在所有的組合式API和組件中通過(guò)name來(lái)調(diào)用value指定對(duì)象。
示例:

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

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

上例中，$hello 就變成了nuxtApp的一部分了，你可以在任何可以訪問(wèn)nuxtApp的地方使用它。

hook(name, cb)

使用鉤子可以在nuxt 應(yīng)用的運(yùn)行時(shí)切片(aspects)中添加一些自定義的代碼邏輯。你可以在vue.js的組合式API和nuxt插件中使用運(yùn)行時(shí)的鉤子，將自定義代碼插入到渲染生命周期中的各個(gè)環(huán)節(jié)中。

鉤子函數(shù)通常用在創(chuàng)建插件的時(shí)候，有哪些運(yùn)行時(shí)鉤子，可以點(diǎn)擊鏈接查看。

示例如下:

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)

主動(dòng)調(diào)用鉤子。例如：

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

實(shí)例中的屬性

vueApp

vueApp是vue.js應(yīng)用實(shí)例,假如你熟悉vue, 就知道可以通過(guò)此實(shí)例注冊(cè)組件、指令，還有安裝vue插件。
更多相關(guān)內(nèi)容可以去vue官網(wǎng)了解。

ssrContext

此屬性是在服務(wù)端的渲染中創(chuàng)建的，也只能在服務(wù)端可用。 通過(guò)此屬性，你可以訪問(wèn)如下信息:

• url 當(dāng)前請(qǐng)求的url
• event (unjs/h3 請(qǐng)求事件)
• payload NuxtApp的payload對(duì)象

payload

payload包含著在服務(wù)端設(shè)置的數(shù)據(jù)和狀態(tài)變量， 客戶端可以在瀏覽器中的window.__NUXT__對(duì)象中獲取到這些數(shù)據(jù)和狀態(tài)。

payload中主要包含如下信息:

• serverRendered (boolean) 表示響應(yīng)的HTML內(nèi)容(response) 是否是服務(wù)端渲染的。
• data(Object) 當(dāng)你使用useFetch或useAsyncData 等接口來(lái)獲取數(shù)據(jù)時(shí)，結(jié)果數(shù)據(jù)可以在 playload.data中獲取到。 這些數(shù)據(jù)被緩存了，如果你再次獲取同樣的數(shù)據(jù)時(shí)，就會(huì)直接從payload.data中獲取并返回了。

示例:

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

上面例子中，第一次調(diào)用接口獲取數(shù)據(jù)后，你就可以在payload.data中訪問(wèn)該數(shù)據(jù)了。當(dāng)你在客戶端通過(guò)ssrContext 來(lái)訪問(wèn)payload.data時(shí)， 你可以得到和服務(wù)端一樣的數(shù)據(jù)

• state(Object) 當(dāng)你使用useState 組合去設(shè)置共享狀態(tài)時(shí)，這個(gè)狀態(tài)數(shù)據(jù)可以通過(guò)payload.state.[name-of-your-state] 方式來(lái)獲取。

例如:

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

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

isHydrating

使用 nuxtApp.isHydrating (boolean) 可以在客戶端檢查nuxt 應(yīng)用是否在激活中。

例如:

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

版權(quán)聲明：本文為凸然網(wǎng)站的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：nuxt3中的useNuxtApp使用詳解