skt-vuetify-templates/src/composables/GUIDE.md

Composables Guide

composables 放可重用流程、page driver、command flow 與較複雜 UI state。簡單模板顯示不要為了形式新增 composable。

子目錄

• page-drivers/：頁面資料協調與 page model 組裝（僅複雜頁面使用）。
• maint/：maintenance demo 的表單、CRUD、editable grid 狀態。
• layout/：AppShell / layout 狀態與事件協調。

頂層放通用 composable：

• useApiCall.ts：封裝 loading / data / error / execute 模式。
• useCrudCommands.ts：通用 CRUD 狀態機（新增 / 編輯 / 檢視 / 儲存 / highlight）。

新增規則

• 用 useXxx.ts 命名。
• 參數較多時使用 options object。
• source state 盡量集中，衍生值用 computed。
• 副作用放在明確 action 或 watcher，不放在 computed。
• 不 import component 或 view。
• 不持有 service module 的底層 HTTP 細節。

Page Driver

Page driver 只應在「需要協調多個 composable / store / route」時才成立。若頁面邏輯只有：

• 組裝一個 computed page model（3-5 個欄位）
• 沒有搜尋、沒有 dialog、沒有複雜事件

則不要建立 page driver，直接在 view 裡寫 computed 即可。

當需要 page driver 時，它負責：

• route param/query 轉成頁面資料
• 協調 store、command composable、表單 composable
• 組裝 page component 需要的 props/events

View 以 destructure 方式取用 page driver 回傳值：

const { pageModel, search, handleSubmit } = useXxxPage()

模板中直接使用，不寫 .value：:page="pageModel"、v-model="search"。

• 與 store/service 的 mutation 流程