在 Nuxt 中,您可以在可组合函数、组件和插件中访问运行时应用程序上下文。
许多可组合函数和实用工具,无论是内置的还是用户创建的,可能都需要访问 Nuxt 实例。这在应用程序中并非无处不在,因为每个请求都会创建一个新的实例。
目前,Nuxt 上下文只能在插件、Nuxt 钩子、Nuxt 中间件(如果用 defineNuxtRouteMiddleware 封装)、以及setup 函数(在页面和组件中)中访问。
如果一个可组合函数在没有上下文访问权限的情况下被调用,您可能会收到一个错误,指出“在插件、Nuxt 钩子、Nuxt 中间件或 Vue setup 函数之外调用了需要访问 Nuxt 实例的可组合函数。”在这种情况下,您还可以使用 nuxtApp.runWithContext 显式地在此上下文内调用函数。
在可组合函数、插件和组件中,您可以使用 useNuxtApp() 访问 nuxtApp。
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!"