composables
使用 composables/ 目录将 Vue 组合式函数自动导入到你的应用程序中。
使用方法
方法 1： 使用命名导出
app/composables/useFoo.ts
export const useFoo = () => {
return useState('foo', () => 'bar')
}
方法 2： 使用默认导出
app/composables/use-foo.ts 或 composables/useFoo.ts
// 它将作为 useFoo() 可用（不带扩展名的文件名的 camelCase）
export default function () {
return useState('foo', () => 'bar')
}
使用： 你现在可以在 .js、.ts 和 .vue 文件中使用自动导入的组合式函数
app/app.vue
<script setup lang="ts">
const foo = useFoo()
</script>
<template>
<div>
{{ foo }}
</div>
</template>
Nuxt 中的
app/composables/ 目录不会为你的代码提供任何额外的响应式功能。相反，组合式函数中的任何响应式都是使用 Vue 的 Composition API 机制实现的，例如 ref 和 reactive。请注意，响应式代码也不限于 app/composables/ 目录的边界。你可以在应用程序中需要的任何地方使用响应式功能。类型
在底层，Nuxt 自动生成文件 .nuxt/imports.d.ts 来声明类型。
请注意，你必须运行 nuxt prepare``、nuxt dev 或 `nuxt build 以让 Nuxt 生成类型。
如果你在开发服务器未运行时创建组合式函数，TypeScript 将抛出错误，例如
Cannot find name 'useBar'。示例
嵌套组合式函数
你可以使用自动导入在另一个组合式函数中使用组合式函数：
app/composables/test.ts
export const useFoo = () => {
const nuxtApp = useNuxtApp()
const bar = useBar()
}
访问插件注入
你可以从组合式函数访问插件注入：
app/composables/test.ts
export const useHello = () => {
const nuxtApp = useNuxtApp()
return nuxtApp.$hello
}
如何扫描文件
Nuxt 仅扫描 app/composables/ 目录顶层的文件，例如：
Directory Structure
|-| composables/
---| index.ts // 扫描
---| useFoo.ts // 扫描
---| nested/
-----| utils.ts // 不扫描
只有 app/composables/index.ts 和 app/composables/useFoo.ts 将被搜索导入。
要让自动导入适用于嵌套模块，你可以重新导出它们（推荐）或配置扫描器以包含嵌套目录：
示例： 从 app/composables/index.ts 文件重新导出你需要的组合式函数：
app/composables/index.ts
// 启用此导出的自动导入
export { utils } from './nested/utils.ts'
示例： 扫描 app/composables/ 文件夹内的嵌套目录：
nuxt.config.ts
export default defineNuxtConfig({
imports: {
dirs: [
// 扫描顶级组合式函数
'~/composables',
// ... 或扫描嵌套一级深度的特定名称和文件扩展名的组合式函数
'~/composables/*/index.{ts,js,mjs,mts}',
// ... 或扫描给定目录中的所有组合式函数
'~/composables/**',
],
},
})