7.6 - Pinia 與 Props/Emit 的關係

Pinia 不是直接取代 props/emit，而是減少你需要用 props/emit 的情況。
如果只有父子元件間傳遞資料，用 props/emit 還是最簡單的做法；只有當資料要被很多元件共用時，才建議放進 Pinia store。

功能	Props/Emit	Pinia
資料傳遞方向	單向：父 → 子（props）、子 → 父（emit）	雙向共享：任何元件都能讀取和修改 store
適合情境	資料只在父子元件間流動	資料要被多個不相關的元件共用
缺點	深層元件需要層層傳 props（props drilling），程式複雜	store 集中管理，結構需要事先設計，但可減少重複傳遞

Props/Emit vs Pinia 選擇判斷（含實務案例）

情況	用 Props/Emit	用 Pinia
單層父子傳遞	✅
跨多層元件共享		✅
UI 控制 / 回呼事件	✅
短暫狀態	✅
全域設定（登入狀態、使用者資訊）		✅
多頁共用資料（購物車、登入狀態、偏好設定）		✅

📌 簡單結論

• Props/Emit → 適合小範圍、單純的父子元件互動、暫時資料。
• Pinia → 適合全域、跨頁面、跨元件共用，或需要集中 API 邏輯的情境。

常見 UI 元件狀態選擇速查表

元件 / 情境	建議	說明 & 判斷點
Pagination 分頁（單一列表）	Props/Emit	局部狀態、父 → 子顯示、子 → 父回報頁碼。若多個列表需要同步頁碼或路由同步 ?page=，可升級為 Pinia 或使用路由參數。
Modal / Dialog	Props/Emit	:open + @close。若跨頁面任意地方都要能開相同 Modal（例如全域快捷鍵開啟），→ Pinia（或事件總線）。
Drawer / Sidebar 開闔	Props/Emit	單頁使用就局部。若全站統一開闔狀態（如響應式 Layout），→ Pinia（uiStore）。
Tabs（同頁切換）	Props/Emit	純展示/切換。若Tab 選擇需跨多個元件或記住離開再回來，→ Pinia 或路由。
Form 表單值	Props/Emit	典型是父持有狀態、子輸入元件用 v-model。若表單在多步驟頁面（Wizard）間共享/暫存，→ Pinia（formStore）。
Toast / Notification	Pinia	全域跨頁顯示、多處觸發；在 actions 內集中新增/移除訊息。
User / Auth 狀態	Pinia	全域共用、頁面常駐（token、使用者 info、權限）。
Theme / Locale（深色模式、語系）	Pinia	全域設定、需持久化（建議搭配 persistedstate）。
Breadcrumb / Header 顯示資料	視需求	若來源在當前頁，用 Props；若需跨頁同步（依路由/權限），→ Pinia 或由路由計算。
搜尋條件（Filter）（單頁）	Props/Emit	局部即可。若跨多個列表/頁面共用同一組條件，→ Pinia。
表格勾選多筆（僅本頁）	Props/Emit	父持有、子 emit。若跨分頁/跨區域共用勾選結果，→ Pinia。
多列表共用資料來源	Pinia	在 actions 內做 API + 快取，避免重複請求。
路由層級的 UI 狀態（例如 keep-alive 的頁碼、展開狀態）	Pinia 或路由參數	需返回時保留狀態 → Pinia；可序列化到網址 → 路由參數更好。
Loading / Global Overlay	Pinia	多個