composables/ · Nuxt 目录结构

用法

方法 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 将会抛出一个错误，例如 找不到名称 'useBar'。

示例

嵌套 Composable

您可以在另一个 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/**'
    ]
  }
})

组件

components/ 目录用于存放你所有的 Vue 组件。

内容

使用 content/ 目录为你的应用创建一个基于文件的 CMS。