composables
使用 composables/ 目录自动将你的 Vue composables 导入到你的应用程序中。
用法
方法 1：使用命名导出
composables/useFoo.ts
export const useFoo = () => {
return useState('foo', () => 'bar')
}
方法 2：使用默认导出
composables/use-foo.ts 或 composables/useFoo.ts
// It will be available as useFoo() (camelCase of file name without extension)
export default function () {
return useState('foo', () => 'bar')
}
用法：现在你可以在 .js、.ts 和 .vue 文件中使用自动导入的 composable
app.vue
<script setup lang="ts">
const foo = useFoo()
</script>
<template>
<div>
{{ foo }}
</div>
</template>
Nuxt 中的
composables/ 目录不会为你的代码提供任何额外的响应式能力。相反，composables 中的任何响应式都是使用 Vue 的 Composition API 机制实现的，例如 ref 和 reactive。请注意，响应式代码也不仅限于 composables/ 目录的边界。你可以自由地在应用程序中任何需要的地方使用响应式特性。在 文档 > 示例 > 功能 > 自动导入 中阅读和编辑实时示例。
类型
在底层，Nuxt 自动生成文件 .nuxt/imports.d.ts 来声明类型。
请注意，你必须运行 nuxi prepare、nuxi dev 或 nuxi build 才能让 Nuxt 生成类型。
如果你在没有运行开发服务器的情况下创建一个 composable，TypeScript 将抛出一个错误，例如
Cannot find name 'useBar'。示例
嵌套 Composables
你可以在另一个 composable 中使用 composable，通过自动导入
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 // scanned
---| useFoo.ts // scanned
---| nested/
-----| utils.ts // not scanned
只会搜索 composables/index.ts 和 composables/useFoo.ts 以进行导入。
要使嵌套模块的自动导入工作，你可以重新导出它们（推荐）或配置扫描器以包含嵌套目录
示例：从 composables/index.ts 文件中重新导出你需要的 composables
composables/index.ts
// Enables auto import for this export
export { utils } from './nested/utils.ts'
示例：扫描 composables/ 文件夹内的嵌套目录
nuxt.config.ts
export default defineNuxtConfig({
imports: {
dirs: [
// Scan top-level modules
'composables',
// ... or scan modules nested one level deep with a specific name and file extension
'composables/*/index.{ts,js,mjs,mts}',
// ... or scan all modules within given directory
'composables/**'
]
}
})