composables

使用 composables/目录将你的 Vue 组合式函数自动导入到你的应用程序中。

使用方法

使用命名导出

• composables/useFoo.ts

export const useFoo = () => {
  return useState("foo", () => "bar");
};

文件名导出

• composables/use-foo.ts 或 composables/useFoo.ts

// 它将作为 useFoo() 可用（文件名的驼峰形式，不包括扩展名）
export default function () {
  return useState("foo", () => "bar");
}

• 使用方法

现在你可以在 .js、.ts 和 .vue 文件中使用自动导入的组合函数

<script setup lang="ts">
const foo = useFoo()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>

文件扫描

Nuxt 仅仅扫描composables/目录的顶级文件,例如

| composables/
---| index.ts     // 被扫描
---| useFoo.ts    // 被扫描
-----| nested/
-------| utils.ts // 不被扫描

只有 composables/index.ts 和 composables/useFoo.ts 会被搜索导入。

要使嵌套模块的自动导入工作，你可以重新导出它们（推荐）或配置扫描器以包括嵌套目录：

示例： 从 composables/index.ts 文件中重新导出你需要的组合函数：

// 启用对此导出的自动导入
export { utils } from "./nested/utils.ts";

扫描子目录

• nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    dirs: [
      // 扫描顶级模块
      'composables',
      // ... 或扫描带有特定名称和文件扩展名的一级嵌套模块
      'composables/*/index.{ts,js,mjs,mts}',
      // ... 或扫描给定目录中的所有模块
      'composables/**'
    ]
  }
})