前端開發中的時候，很容易把 API 事件寫在同一個 component 裡面，大部分人會進行封裝，讓傳送 API 的方法變得更簡單
先前碰到同事裡用前端框架系統 Vue 的時候，則是把 API 放到 Vuex 裡面，之前看過 React 裡面，如果上下層傳遞有點過於遙遠或是複雜，通常會用 State 來管控， Vue 使用 Vuex ，React 則是用 redux 來表達貫穿這個元件的參數。
不過正如上面說的 Vuex 跟 redux 都是用來放狀態的，如果拿來放其他東西，並不是說不可以，只是如果在物件導向的裡面中，這樣就違反了 單一功能原則的項目，狀態管理就不再是狀態管理。
自從看了一點 Clean Code的書之後，開始針對 Clean Architecture 很感興趣，原本我主要寫後端跟一點點的前端，開始把後端架構邏輯設計延伸到了前端，開始修正前端同事的程式碼。
Clean Architecture：
回到正題 要實現乾淨的架設設計，首先先把專案中的 Vuex 裡面，包了一堆 API 的模式給抽離開來，去年我重新理解一次 新的 JavaScript 的時候，發現 ES6 有個相當好用的東西叫做 Classes 如果你懂一點物件導向就可以知道這個東西是用來做什麼的。
實際操作了一下真的讓我感動到哭，很久很久以前操作 JavaScript 的時候要實現到類似的事情必須要 function 一層包了一層才有可能實現這件事情，現在原生 JS 支援把這個東西當成特別的 function 讓你使用更簡潔的方式建立物件，以及處理繼承，真的相當方便
這邊先設計一個範例，採用 https://reqres.in 來顯示 REST API 的方式，這個資源是隨意 Google到的，要套用現有的 資源應該也不是問題。