composables

使用 `composables/` 目錄將你的 Vue 可組合函式自動匯入到應用程式中。

使用

方法 1： 使用命名匯出

app/composables/useFoo.ts
export const useFoo = () => {
  return useState('foo', () => 'bar')
}

方法 2： 使用預設匯出

app/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 檔案中使用自動匯入的可組合函式。

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

<template>
  <div>
    {{ foo }}
  </div>
</template>
Nuxt 中的 app/composables/ 目錄不會為你的程式碼提供任何額外的響應式能力。相反，可組合函式中的任何響應性都是透過 Vue 的組合式 API 機制（例如 `ref` 和 `reactive`）來實現的。請注意，響應式程式碼也不限於 app/composables/ 目錄的範圍。你可以自由地在應用程式中需要響應式功能的地方使用它們。
在文件 > 4 X > 指南 > 概念 > 自動匯入中瞭解更多資訊。
在 文件 > 4.X > 示例 > 功能 > 自動匯入 中閱讀並編輯即時示例。

型別

在底層，Nuxt 會自動生成檔案 .nuxt/imports.d.ts 來宣告型別。

請注意，你必須執行 nuxt prepare、nuxt dev 或 nuxt build 才能讓 Nuxt 生成型別。

如果你在開發伺服器未執行的情況下建立可組合函式，TypeScript 將會丟擲錯誤，例如 Cannot find name 'useBar'.

示例

巢狀可組合函式

你可以使用自動匯入在一個可組合函式中巢狀使用另一個可組合函式

app/composables/test.ts
export const useFoo = () => {
  const nuxtApp = useNuxtApp()
  const bar = useBar()
}

訪問外掛注入

你可以從可組合函式中訪問外掛注入。

app/composables/test.ts
export const useHello = () => {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$hello
}

檔案如何被掃描

Nuxt 只掃描 app/composables/ 目錄頂層的檔案，例如：

目錄結構
-| composables/
---| index.ts     // scanned
---| useFoo.ts    // scanned
---| nested/
-----| utils.ts   // not scanned

只會搜尋 app/composables/index.ts 和 app/composables/useFoo.ts 中的匯入。

要讓巢狀模組的自動匯入生效，你可以重新匯出它們（推薦）或者配置掃描器以包含巢狀目錄。

示例： 從 app/composables/index.ts 檔案中重新匯出你需要的可組合函式

app/composables/index.ts
// Enables auto import for this export
export { utils } from './nested/utils.ts'

示例： 掃描 app/composables/ 資料夾內的巢狀目錄

nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    dirs: [
      // Scan top-level composables
      '~/composables',
      // ... or scan composables nested one level deep with a specific name and file extension
      '~/composables/*/index.{ts,js,mjs,mts}',
      // ... or scan all composables within given directory
      '~/composables/**',
    ],
  },
})