上下文

原始檔
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()

  // You can now use the nuxt instance
  console.log(nuxt.options)
}

型別

function useNuxt (): Nuxt

返回值

useNuxt 函式返回 Nuxt 例項，其中包含 Nuxt 中所有可用的選項和方法。

屬性型別描述
optionsNuxtOptions解析後的 Nuxt 配置。
hooksHookable<NuxtHooks>Nuxt 鉤子系統。允許註冊和監聽生命週期事件。
hook(name: string, (...args: any[]) => Promise<void> | void) => () => voidnuxt.hooks.hook 的快捷方式。為特定的生命週期鉤子註冊單個回撥。
callHook(name: string, ...args: any[]) => Promise<any>nuxt.hooks.callHook 的快捷方式。手動觸發生命週期鉤子並執行所有已註冊的回撥。
addHooks(configHooks: NestedHooks) => () => voidnuxt.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')
  }
}

tryUseNuxt

從上下文中獲取 Nuxt 例項。如果 Nuxt 不可用，它將返回 null。

使用

import { tryUseNuxt } from '@nuxt/kit'

function setupSomething () {
  const nuxt = tryUseNuxt()

  if (nuxt) {
    // You can now use the nuxt instance
    console.log(nuxt.options)
  } else {
    console.log('Nuxt is not available')
  }
}

型別

function tryUseNuxt (): Nuxt | null

返回值

tryUseNuxt 函式返回 Nuxt 例項（如果可用），否則返回 null。

如 useNuxt 部分所述的 Nuxt 例項。

示例

import { tryUseNuxt } from '@nuxt/kit'

interface SiteConfig {
  title?: string
}

export const requireSiteConfig = (): SiteConfig => {
  const nuxt = tryUseNuxt()
  if (!nuxt) {
    return {}
  }
  return nuxt.options.siteConfig
}