# 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 回傳值：
```ts
const { pageModel, search, handleSubmit } = useXxxPage()
```
模板中直接使用，不寫 `.value`：`:page="pageModel"`、`v-model="search"`。

- 與 store/service 的 mutation 流程