上下文
Nuxt Kit 提供了一组实用程序，可帮助您处理上下文。
Nuxt 模块允许您增强 Nuxt 的功能。它们提供了一种结构化的方式来保持代码的组织和模块化。如果您希望将模块分解成更小的组件，Nuxt 提供了 useNuxt 和 tryUseNuxt 函数。这些函数使您能够方便地从上下文中访问 Nuxt 实例，而无需将其作为参数传递。
当您在 Nuxt 模块中使用
setup 函数时，Nuxt 已经作为第二个参数提供。这意味着您可以直接使用它，而无需调用 useNuxt()。您可以查看 Nuxt Site Config 作为使用示例。useNuxt
从上下文中获取 Nuxt 实例。如果 Nuxt 不可用，它将抛出错误。
类型
function useNuxt(): Nuxt
interface Nuxt {
options: NuxtOptions
hooks: Hookable<NuxtHooks>
hook: Nuxt['hooks']['hook']
callHook: Nuxt['hooks']['callHook']
addHooks: Nuxt['hooks']['addHooks']
ready: () => Promise<void>
close: () => Promise<void>
server?: any
vfs: Record<string, string>
apps: Record<string, NuxtApp>
}
示例
// https://github.com/Lexpeartha/nuxt-xstate/blob/main/src/parts/transpile.ts
import { useNuxt } from '@nuxt/kit'
export const setupTranspilation = () => {
const nuxt = useNuxt()
nuxt.options.build.transpile = nuxt.options.build.transpile || []
if (nuxt.options.builder === '@nuxt/webpack-builder') {
nuxt.options.build.transpile.push(
'xstate',
)
}
}
tryUseNuxt
从上下文中获取 Nuxt 实例。如果 Nuxt 不可用，它将返回 null。
类型
function tryUseNuxt(): Nuxt | null
interface Nuxt {
options: NuxtOptions
hooks: Hookable<NuxtHooks>
hook: Nuxt['hooks']['hook']
callHook: Nuxt['hooks']['callHook']
addHooks: Nuxt['hooks']['addHooks']
ready: () => Promise<void>
close: () => Promise<void>
server?: any
vfs: Record<string, string>
apps: Record<string, NuxtApp>
}
示例
// https://github.com/harlan-zw/nuxt-site-config/blob/main/test/assertions.test.ts
import { tryUseNuxt } from '@nuxt/kit'
interface SiteConfig {
title: string
}
export const requireSiteConfig = (): SiteConfig => {
const nuxt = tryUseNuxt()
if (!nuxt) {
return { title: null }
}
return nuxt.options.siteConfig
}