上下文
Nuxt Kit 提供了一组实用工具,帮助你处理上下文。
Nuxt 模块允许你增强 Nuxt 的功能。它们提供了一种结构化的方式来保持代码的组织性和模块化。如果你想将模块拆分成更小的组件,Nuxt 提供了 useNuxt
和 tryUseNuxt
函数。这些函数使你能够方便地从上下文中访问 Nuxt 实例,而无需将其作为参数传递。
在 Nuxt 模块的
setup
函数中,Nuxt 已经作为第二个参数提供。这意味着你可以直接访问它,而无需调用 useNuxt()
。useNuxt
从上下文中获取 Nuxt 实例。如果 Nuxt 不可用,则会抛出错误。
用法
import { useNuxt } from '@nuxt/kit'
const setupSomeFeature = () => {
const nuxt = useNuxt()
// 你现在可以使用 nuxt 实例
console.log(nuxt.options)
}
类型
function useNuxt(): Nuxt
返回值
useNuxt
函数返回 Nuxt 实例,包含 Nuxt 中所有可用的选项和方法。
属性 | 类型 | 描述 |
---|---|---|
options | NuxtOptions | 解析后的 Nuxt 配置。 |
hooks | Hookable<NuxtHooks> | Nuxt 钩子系统,允许注册及监听生命周期事件。 |
hook | (name: string, (...args: any[]) => Promise<void> | void) => () => void | nuxt.hooks.hook 的快捷方式。为特定生命周期钩子注册单个回调。 |
callHook | (name: string, ...args: any[]) => Promise<any> | nuxt.hooks.callHook 的快捷方式。手动触发生命周期钩子并运行所有注册的回调。 |
addHooks | (configHooks: NestedHooks) => () => void | nuxt.hooks.addHooks 的快捷方式。一次注册多个钩子。 |
示例
import { useNuxt } from '@nuxt/kit'
export const setupTranspilation = () => {
const nuxt = useNuxt()
if (nuxt.options.builder === '@nuxt/webpack-builder') {
nuxt.options.build.transpile ||= []
nuxt.options.build.transpile.push('xstate')
}
}
import { setupTranspilation } from './setupTranspilation'
export default defineNuxtModule({
setup () {
setupTranspilation()
},
})
tryUseNuxt
从上下文中获取 Nuxt 实例。如果 Nuxt 不可用,则返回 null
。
用法
import { tryUseNuxt } from '@nuxt/kit'
function setupSomething () {
const nuxt = tryUseNuxt()
if (nuxt) {
// 你现在可以使用 nuxt 实例
console.log(nuxt.options)
} else {
console.log('Nuxt 不可用')
}
}
类型
function tryUseNuxt(): Nuxt | null
返回值
tryUseNuxt
函数返回 Nuxt 实例(如果可用),否则返回 null
。
Nuxt 实例参见 useNuxt
部分的描述。
示例
import { tryUseNuxt } from '@nuxt/kit'
interface SiteConfig {
title?: string
}
export const requireSiteConfig = (): SiteConfig => {
const nuxt = tryUseNuxt()
if (!nuxt) {
return {}
}
return nuxt.options.siteConfig
}
import { defineNuxtModule, useNuxt } from '@nuxt/kit'
import { requireSiteConfig } from './requireSiteConfig'
export default defineNuxtModule({
setup (_, nuxt) {
const config = requireSiteConfig()
nuxt.options.app.head.title = config.title
},
})