情境說明
開發公司 Vue 專案，當專案完成上正式產品機器的時候，發現網頁讀取速度因資料量較大，有延遲的情況。為了讓使用者知道是讀取時間緩慢，而非程式碼錯誤，所以計畫在相關操作上新增 Spinner，加上背景灰階+畫面載入的圖樣，優化使用者操作體驗。
[實作] 基於已存在專案新增 spinner 功能
為了在開發環境模擬正式產品機，先在 python 設定檔的部分做調整。把開發的 dev.host 註解掉，改用 prod.host。
Spinner.vue 完整檔案如下：
由於 spinner 的使用常需要跨組件溝通，藉由 Vuex 的輔助會方便許多。
有關 Vuex 的基本介紹，可以參考以下文章：
🚪 學習 Vuex 狀態管理模式(上)
🚪 學習 Vuex 狀態管理模式(中)
🚪 學習 Vuex 狀態管理模式(下)
以 management 分頁為例
在對應的 modules 做註冊(modules/management.js )
後續 management 頁面都用 $store.state.management 取用
在對應的部分加上 spinner 設定，呼叫 API 之前先放下 spinner，畫面變成灰階，待 API 回傳資料，轉圈結束再將 spinner 改為 false。
注意事項
在開發時，為了模擬正式環境有切換 python 檔案prod.host，之後程式碼 git push 時，要記得切換回來。
小結
由於公司專案架構龐大，呼叫 API 回傳資料複雜，且此篇內容程式碼屬公司智慧資產。綜合以上因素考量，故未附上完整檔案的程式碼。因著此案例，後續若有 Vue 專案在讀取 API 等待時間較久時，可直接將 Spinner.vue 複製一份做使用。另外，藉由這次 Spinner 實作，再次體會 Vuex 狀態管理模式帶來的便利性。
➰ The spinning will stop.
