composables
使用 composables/ 目錄來自動匯入您的 Vue composables 到您的應用程式中。
用法
方法 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/ 目錄不會為您的程式碼提供任何額外的響應式功能。相反地，composable 內的任何響應式都是使用 Vue 的 Composition API 機制實現的，例如 ref 和 reactive。請注意，響應式程式碼也不僅限於 composables/ 目錄的範圍。您可以自由地在應用程式中任何需要的地方使用響應式功能。在文件 > 範例 > 功能 > 自動匯入中閱讀和編輯即時範例。
類型
在底層，Nuxt 自動產生檔案 .nuxt/imports.d.ts 來宣告類型。
請注意，您必須執行 nuxi prepare、nuxi dev 或 nuxi build，以讓 Nuxt 產生類型。
如果您在沒有執行開發伺服器的情況下建立 composable，TypeScript 會拋出錯誤，例如
Cannot find name 'useBar'.範例
巢狀 Composables
您可以在另一個 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/**'
]
}
})