composables
使用 composables 目录自动导入你的 Vue 组合函数到你的应用程序中。
使用方法
方法 1: 使用命名导出
composables/useFoo.ts
export const useFoo = () => {
return useState('foo', () => 'bar')
}
方法 2: 使用默认导出
composables/use-foo.ts or 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/
目录的边界。你可以在应用程序中任何需要的地方自由使用响应式功能。 Read and edit a live example in 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/
目录 顶层的文件,例如:
目录结构
-| 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/**'
]
}
})