v3.17
GitHub

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 more in Docs > Guide > Concepts > Auto Imports.
Read and edit a live example in Docs > Examples > Features > Auto Imports.

类型

在后台，Nuxt 自动生成文件 .nuxt/imports.d.ts 来声明类型。

请注意，你必须运行 nuxt prepare、nuxt dev 或 nuxt 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/**'
    ]
  }
})