composables
使用 composables/ 目录将 Vue composables 自动导入到您的应用程序中。
用法
方法 1： 使用命名导出
export const useFoo = () => {
return useState('foo', () => 'bar')
}
方法 2： 使用默认导出
// 它将作为 useFoo() 可用（文件名的小驼峰形式，不含扩展名）
export default function () {
return useState('foo', () => 'bar')
}
用法： 现在您可以在 .js、.ts 和 .vue 文件中使用自动导入的 composable
<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 来声明类型。
请注意，您必须运行 nuxt prepare、nuxt dev 或 nuxt build 以便让 Nuxt 生成类型。
如果在开发服务器未运行的情况下创建 composable，TypeScript 将抛出错误，例如 Cannot find name 'useBar'.
示例
嵌套 Composables
您可以使用自动导入在另一个 composable 中使用一个 composable：
export const useFoo = () => {
const nuxtApp = useNuxtApp()
const bar = useBar()
}
访问插件注入
您可以从 composables 中访问插件注入：
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：
// 启用此导出的自动导入
export { utils } from './nested/utils.ts'
示例： 扫描 composables/ 文件夹内的嵌套目录：
export default defineNuxtConfig({
imports: {
dirs: [
// 扫描顶级 composables
'~/composables',
// ... 或扫描特定名称和文件扩展名的一级嵌套 composables
'~/composables/*/index.{ts,js,mjs,mts}',
// ... 或扫描给定目录内的所有 composables
'~/composables/**'
]
}
})
※此页面是 Nuxt.js 官方文档的非官方翻译页面。