Nuxt 3 使用 composables/ 目录使用 auto-imports 自动将您的 Vue 可组合项导入您的应用程序！
在幕后，Nuxt自动生成文件 .nuxt/imports.d.ts 来声明类型。
请注意，您必须运行nuxi prepare、nuxi dev或nuxi 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.ts 和 composables/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/**'
]
}
})