composables
使用 composables/ 目录将你的 Vue 组合式函数自动导入到应用中。
使用方法
方法 1： 使用命名导出
composables/useFoo.ts
export const useFoo = () => {
return useState('foo', () => 'bar')
}
方法 2： 使用默认导出
composables/use-foo.ts 或 composables/useFoo.ts
// 将以 useFoo() 的形式可用（文件名驼峰式，无扩展名）
export default function () {
return useState('foo', () => 'bar')
}
用法： 你现在可以在 .js、.ts 和 .vue 文件中使用自动导入的组合式函数
app.vue
<script setup lang="ts">
const foo = useFoo()
</script>
<template>
<div>
{{ foo }}
</div>
</template>
Nuxt 中的
composables/ 目录不会为你的代码提供额外的响应式功能。相反，组合式函数内的任何响应式功能都是通过 Vue 的组合式 API 机制（如 ref 和 reactive）实现的。请注意，响应式代码也不限于 composables/ 目录的范围。你可以在应用中任何需要的地方自由使用响应式功能。 阅读并编辑实时示例中的内容 Docs > Examples > Features > Auto Imports.
类型
在底层，Nuxt 会自动生成 .nuxt/imports.d.ts 文件来声明类型。
请注意，你需要运行 nuxi prepare、nuxi dev 或 nuxi build 以让 Nuxt 生成类型。
如果在未运行开发服务器的情况下创建组合式函数，TypeScript 会抛出错误，例如
Cannot find name 'useBar'.示例
嵌套组合式函数
你可以使用自动导入在另一个组合式函数中使用一个组合式函数：
composables/test.ts
export const useFoo = () => {
const nuxtApp = useNuxtApp()
const bar = useBar()
}
访问插件注入
你可以从组合式函数中访问插件注入：
composables/test.ts
export const useHello = () => {
const nuxtApp = useNuxtApp()
return nuxtApp.$hello
}
文件扫描方式
Nuxt 仅扫描 composables/ 目录 顶层的文件，例如：
Directory Structure
-| composables/
---| index.ts // 会被扫描
---| useFoo.ts // 会被扫描
---| nested/
-----| utils.ts // 不会被扫描
只有 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/**'
]
}
})