NuxtApp
在 Nuxt 3 中,您可以在 composables、components 和 plugins 內存取執行階段應用程式上下文。
在 Nuxt 3 中,您可以在 composables、components 和 plugins 內存取執行階段應用程式上下文。
Nuxt 應用程式介面
Nuxt 上下文
許多 composables 和工具,無論是內建的還是使用者自製的,都可能需要存取 Nuxt 實例。這並非在應用程式中的每個地方都存在,因為每次請求都會建立一個新的實例。
目前,Nuxt 上下文僅可在 plugins、Nuxt 鉤子、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
作為第一個參數。
提供助手函式
您可以提供助手函式,使其可在所有 composables 和應用程式中使用。這通常會在 Nuxt plugin 內發生。
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)
console.log(nuxtApp.$hello('name')) // Prints "Hello name!"