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