Composables 讓你將可重用的邏輯抽離出來，在任何元件中都能輕鬆使用。
1 核心概念
在寫程式時，我們最忌諱 重複的程式碼 (Don't Repeat Yourself - DRY)。如果你在「首頁」需要一個計數器，在「關於頁」也需要一個計數器，傳統寫法是你得在兩個檔案裡都寫一遍 const count = ref(0)。
使用方式
檔案位置：app/composables/useCounter.ts
使用方式：在任何 .vue 檔中直接呼叫 useCounter()，完全不需要寫 import。
這讓你的 Vue 檔案變得很乾淨，只專注在「畫面顯示」，而把「運算邏輯」全部藏在 Composables 裡。
2 給 Claude Code 的中文指令 Prompt
我們要建立一個簡單的計數器邏輯，並讓它具備「加」與「減」的功能。
請複製以下指令給 Claude：
請幫我建立一個 Composable 並在頁面中使用：
- 建立
app/composables/資料夾。 - 建立
app/composables/useCounter.ts：- 這是一個 TypeScript 檔案。
- 匯出一個預設函數 (
export default function useCounter)。 - 在函數內部定義一個響應式變數
count(初始值 0)。 - 定義兩個函數
increment(加 1) 和decrement(減 1)。 - 最後 return 一個物件包含
{ count, increment, decrement }。
- 修改
app/pages/index.vue：- 在
<script setup>中直接呼叫const { count, increment, decrement } = useCounter()(不要寫 import)。 - 在 template 中顯示
count的數字。 - 加入兩個按鈕，分別綁定點擊事件到
increment和decrement。
- 在
3 驗收重點
請檢查 Claude 完成後的結果：
✓
檔案結構檢查： 確認有
app/composables/useCounter.ts。注意 Nuxt 的習慣命名通常以 use 開頭（駝峰式命名）。 ✓
程式碼檢查 (app/pages/index.vue)： 檢查 <script setup> 區域，絕對不能出現 import useCounter from ...。
✓
功能檢查： 回到瀏覽器首頁，點擊按鈕，數字應該會變動。這證明了邏輯已經成功被抽離並注入到頁面中。
💡 架構師筆記 (Utils vs Composables)
你可能會問：「這跟普通的 helper function 有什麼不同？」
•
Utils (
utils/ 資料夾)：通常放純函數（Stateless），例如 formatDate(date)。輸入 A 永遠得到 B，不涉及 Vue 的響應式系統。 •
Composables (
composables/ 資料夾)：通常涉及 State (狀態)。例如我們剛寫的 useCounter，它裡面用了 ref()。這意味著當 Composable 裡的資料變動時，畫面會跟著更新。