NuxtApp

原始檔
在 Nuxt 中,您可以在可組合函式、元件和外掛中訪問執行時應用程式上下文。

在 Nuxt 中,您可以在可組合函式、元件和外掛中訪問執行時應用程式上下文。

在 Nuxt 2 中,這被稱為 Nuxt 上下文

Nuxt 應用程式介面

跳轉到 NuxtApp 介面文件。

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 作為第一個引數接收。

請在文件 > 4 X > 指南 > 目錄結構 > 外掛中閱讀更多內容。

提供輔助函式

您可以提供輔助函式,以便在所有可組合函式和應用程式中使用。這通常發生在 Nuxt 外掛中。

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

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