composables
使用 composables/ 目录自动将您的 Vue Composables 导入到应用程序中。
用法
方法 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/ 目录并未为您的代码提供额外的响应性能力。相反，Composables 中的任何响应性都是通过 Vue 的组合式 API 机制实现的，如 ref 和 reactive。请注意，响应式代码也不局限于 composables/ 目录的边界。您可以在应用的任何需要的地方自由使用响应性特性。 Read and edit a live example in Docs > Examples > Features > Auto Imports.
类型
在内部，Nuxt 自动生成文件 .nuxt/imports.d.ts 来声明类型。
需要注意的是，您必须运行 nuxi prepare、nuxi dev 或者 nuxi build 让 Nuxt 生成类型。
如果您在没有运行开发服务器的情况下创建 Composables，TypeScript 将抛出错误，如
找不到名称 'useBar'。示例
嵌套 Composables
您可以使用一个 Composables 在另一个 Composables 中使用自动导入：
composables/test.ts
export const useFoo = () => {
const nuxtApp = useNuxtApp()
const bar = useBar()
}
访问插件注入
您可以从 Composables 访问 插件注入：
composables/test.ts
export const useHello = () => {
const nuxtApp = useNuxtApp()
return nuxtApp.$hello
}
文件如何被扫描
Nuxt 只会扫描位于 composables/ 目录顶层的文件，例如：
目录结构
-| composables/
---| index.ts // 被扫描
---| useFoo.ts // 被扫描
---| nested/
-----| utils.ts // 不被扫描
只有 composables/index.ts 和 composables/useFoo.ts 会被搜索以进行导入。
要让嵌套模块的自动导入工作，您可以选择重新导出它们（推荐）或配置扫描器以包含嵌套目录：
示例： 从 composables/index.ts 文件重新导出所需的 Composables：
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/**'
]
}
})