state-management

此技能為管理前端應用程式狀態提供結構化框架，針對何時及如何實作各種模式提供架構指導。專為在 React 或 Vue 應用程式中工作並需要維護乾淨、高效能與可擴展程式碼庫的前端開發人員與架構師所設計。透過將狀態分類為本機、共享、伺服器、全域及 URL 狀態，協助團隊選擇合適的工具，減少複雜性並避免諸如不必要的重新渲染或資料過時等常見錯誤。

• 將狀態分為五個不同層次：本機 UI、共享 UI、伺服器、全域應用程式及 URL 狀態。

• 提供 TanStack Query (原 React Query) 的詳細實作模式，包括基本查詢、變異與樂觀更新。

• 提供適用於 React 的 Zustand 與 Vue 的 Pinia 全域狀態管理模板，並完整包含效能優化選取器 (Selectors) 與計算屬性。

• 包含基於 URL 的狀態同步最佳實務，確保應用程式狀態可分享且可加入書籤。

• 包含針對簡單元件層級 useState、基於 Context 的 Provider 與外部程式庫之間如何選擇的決策邏輯。

• 在架構新功能時，使用此技能來決定資料應屬於全域儲存、伺服器快取還是元件狀態。

• 輸入：關於狀態資料的上下文（例如：API 回應、主題或表單輸入）與所使用的框架（React/Vue）。

• 輸出：推薦的實作方法、程式碼模式與架構合理性說明。

• 實作限制：專注於現代工業標準程式庫；開發人員應根據狀態管理需求的複雜度來評估程式庫的套件大小。管理全域儲存時，請務必使用效能優化的選取器（例如 Zustand 中的淺比較）以防止不必要的元件重新渲染。