可组合项 Composables

使用 composables/ 目录将您的 Vue 可组合项自动导入到您的应用程序中。

Nuxt 3 使用 composables/ 目录使用 auto-imports 自动将您的 Vue 可组合项导入您的应用程序！

在幕后，Nuxt自动生成文件 .nuxt/imports.d.ts 来声明类型。

请注意，您必须运行nuxi prepare、nuxi dev或nuxi build才能让 Nuxt 生成类型。如果您在开发服务器未运行的情况下创建可组合项，TypeScript 将抛出错误，例如“找不到名称useBar。”

使用方法

方法一： 使用命名导出

composables/useFoo.ts

export function useFoo() {
  return useState('foo', () => 'bar')
}

方法二： 使用默认导出

composables/use-foo.ts or composables/useFoo.ts

// 它将作为 useFoo() 提供(不带扩展名的文件名的驼峰式大小写)
export default function () {
  return useState('foo', () => 'bar')
}

用法： 您现在可以在 .js、.ts 和 .vue 文件中使用自动导入的可组合项

app.vue

vue

<script setup>
const foo = useFoo()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>

案例演示：

示例

嵌套的可组合项

您可以使用自动导入在另一个可组合项中使用一个可组合项：

composables/test.ts

export function useFoo() {
  const nuxtApp = useNuxtApp()
  const bar = useBar()
}

访问插件注入

您可以从可组合项访问插件注入：

composables/test.ts

export function useHello() {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$hello
}

如何扫描文件

Nuxt 仅扫描 composables/ 目录顶层的文件，例如：

bash

composables
 | - index.ts // scanned
 | - useFoo.ts // scanned
 | - nested
 | --- utils.ts // not scanned

只有 composables/index.ts 和 composables/useFoo.ts 会被搜索导入。

要让嵌套模块自动导入，您可以重新导出它们(推荐)或配置扫描器以包含嵌套目录：

示例： 从 composables/index.ts 文件中重新导出您需要的可组合项：

composables/index.ts

// 为此导出启用自动导入
export { utils } from './nested/utils.ts'

示例: 扫描 composables/ 文件夹内的嵌套目录：

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    dirs: [
      // 扫描顶层模块
      'composables',
      // ... 或扫描模块嵌套一层，具有特定的名称和文件扩展名
      'composables/*/index.{ts,js,mjs,mts}',
      // ... 或扫描给定目录中的所有模块
      'composables/**'
    ]
  }
})