NuxtApp
在 Nuxt 中,您可以在可組合函式、元件和外掛中訪問執行時應用程式上下文。
在 Nuxt 中,您可以在可組合函式、元件和外掛中訪問執行時應用程式上下文。
Nuxt 應用程式介面
Nuxt 上下文
許多可組合函式和工具,無論是內建的還是使用者建立的,可能都需要訪問 Nuxt 例項。這在您的應用程式中並非處處都存在,因為每個請求都會建立一個新的例項。
目前,Nuxt 上下文僅在外掛、Nuxt 鉤子、Nuxt 中介軟體(如果用 defineNuxtRouteMiddleware
包裝)中可訪問,以及設定函式(在頁面和元件中)。
如果一個可組合函式在沒有上下文的情況下被呼叫,您可能會收到一個錯誤,指出“在外掛、Nuxt 鉤子、Nuxt 中介軟體或 Vue 設定函式之外呼叫了需要訪問 Nuxt 例項的可組合函式。”在這種情況下,您也可以使用 nuxtApp.runWithContext
顯式地在此上下文中呼叫函式。
訪問 NuxtApp
在可組合函式、外掛和元件中,您可以使用 useNuxtApp()
訪問 nuxtApp
app/composables/useMyComposable.ts
export function useMyComposable () {
const nuxtApp = useNuxtApp()
// access runtime nuxt app instance
}
如果您的可組合函式並非總是需要 nuxtApp
,或者您只是想檢查它是否存在,因為 useNuxtApp
會丟擲異常,您可以改用 tryUseNuxtApp
。
為了方便,外掛也會將 nuxtApp
作為第一個引數接收。
提供輔助函式
您可以提供輔助函式,以便在所有可組合函式和應用程式中使用。這通常發生在 Nuxt 外掛中。
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', name => `Hello ${name}!`)
console.log(nuxtApp.$hello('name')) // Prints "Hello name!"