可组合项 Composables

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

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

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

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

使用方法

方法一: 使用命名导出

composables/useFoo.ts
js
export function useFoo() {
  return useState('foo', () => 'bar')
}

方法二: 使用默认导出

composables/use-foo.ts or composables/useFoo.ts
js
// 它将作为 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
js
export function useFoo() {
  const nuxtApp = useNuxtApp()
  const bar = useBar()
}

访问插件注入

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

composables/test.ts
js
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.tscomposables/useFoo.ts 会被搜索导入。

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

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

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

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

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