在 Nuxt 中,您可以在组合式函数、组件和插件中访问运行时应用上下文。
许多组合式函数和工具(无论是内置的还是用户编写的)可能需要访问 Nuxt 实例。该实例并不存在于应用的所有位置,因为每个请求都会创建一个新的实例。
目前,Nuxt 上下文仅可在 plugins、Nuxt hooks、Nuxt middleware(如果用 defineNuxtRouteMiddleware 包裹),以及页面和组件中的 setup 函数 中访问。
如果在没有上下文访问的情况下调用组合式函数,您可能会收到一条错误,提示 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.'。在这种情况下,您也可以使用 nuxtApp.runWithContext 显式在该上下文中调用函数。
在组合式函数、插件和组件中,您可以使用 useNuxtApp() 访问 nuxtApp:
export function useMyComposable () {
const nuxtApp = useNuxtApp()
// 访问运行时 nuxt 应用实例
}
如果您的组合式函数并不总是需要 nuxtApp,或者您只是想检查它是否存在,由于 useNuxtApp 会抛出异常,您可以改用 tryUseNuxtApp。
插件出于方便也会将 nuxtApp 作为第一个参数传入。
您可以提供帮助函数以便在所有组合式函数和整个应用中使用。这通常在 Nuxt 插件中完成。
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', name => `Hello ${name}!`)
console.log(nuxtApp.$hello('name')) // 打印 "Hello name!"