NuxtApp
在 Nuxt 中,你可以在 composables、组件和插件中访问运行时应用上下文。
在 Nuxt 中,你可以在 composables、组件和插件中访问运行时应用上下文。
Nuxt App 接口
Nuxt 上下文
许多内置的和用户自定义的 composables 和实用程序可能需要访问 Nuxt 实例。这并非在你的应用程序的任何地方都存在,因为每个请求都会创建一个新的实例。
目前,Nuxt 上下文只能在 插件、Nuxt 钩子、Nuxt 中间件(如果包装在 defineNuxtRouteMiddleware 中)以及 setup 函数(在页面和组件中)中访问。
如果在没有访问上下文的情况下调用 composable,你可能会收到一个错误,指出“一个需要访问 Nuxt 实例的 composable 在插件、Nuxt 钩子、Nuxt 中间件或 Vue setup 函数之外被调用。”在这种情况下,你还可以通过使用 nuxtApp.runWithContext 在此上下文中显式调用函数。
访问 NuxtApp
在 composables、插件和组件中,你可以使用 useNuxtApp() 访问 nuxtApp:
composables/useMyComposable.ts
export function useMyComposable () {
const nuxtApp = useNuxtApp()
// access runtime nuxt app instance
}
如果你的 composable 并非总是需要 nuxtApp,或者你只是想检查它是否存在,由于 useNuxtApp 会抛出异常,你可以改用 tryUseNuxtApp。
为了方便起见,插件还将 nuxtApp 作为第一个参数接收。
提供助手函数
你可以提供可在所有 composables 和应用程序中使用的助手函数。这通常发生在 Nuxt 插件中。
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)
console.log(nuxtApp.$hello('name')) // Prints "Hello name!"