透過 100 多個訣竅的集合學習 Nuxt!

NuxtApp

在 Nuxt 3 中,您可以在 composables、components 和 plugins 內存取執行階段應用程式上下文。

在 Nuxt 3 中,您可以在 composables、components 和 plugins 內存取執行階段應用程式上下文。

在 Nuxt 2 中,這被稱為 Nuxt context

Nuxt 應用程式介面

跳到 NuxtApp 介面文件。

Nuxt 上下文

許多 composables 和工具,無論是內建的還是使用者自製的,都可能需要存取 Nuxt 實例。這並非在應用程式中的每個地方都存在,因為每次請求都會建立一個新的實例。

目前,Nuxt 上下文僅可在 pluginsNuxt 鉤子Nuxt 中介軟體,以及 setup 函式(在頁面和元件中)中存取。

如果 composable 在沒有存取上下文的情況下被呼叫,您可能會收到一個錯誤,指出「在 plugin、Nuxt 鉤子、Nuxt 中介軟體或 Vue setup 函式之外呼叫了需要存取 Nuxt 實例的 composable」。在這種情況下,您也可以使用 nuxtApp.runWithContext 在此上下文中明確呼叫函式。

存取 NuxtApp

在 composables、plugins 和 components 內,您可以使用 useNuxtApp() 存取 nuxtApp

composables/useMyComposable.ts
export function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // access runtime nuxt app instance
}

如果您的 composable 並非總是需要 nuxtApp,或者您只想檢查它是否存在,由於 useNuxtApp 會擲回例外,您可以改用 tryUseNuxtApp

為了方便起見,Plugins 也會收到 nuxtApp 作為第一個參數。

文件 > 指南 > 目錄結構 > Plugins 中閱讀更多內容。

提供助手函式

您可以提供助手函式,使其可在所有 composables 和應用程式中使用。這通常會在 Nuxt plugin 內發生。

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

console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
可以透過在 plugins 中返回一個帶有 provide 鍵的物件來注入助手函式。
在 Nuxt 2 plugins 中,這被稱為 inject 函式