學習 Vuex 狀態管理模式(下)
📝 回顧第一章節：學習 Vuex 狀態管理模式(上)
📝 回顧第一章節：學習 Vuex 狀態管理模式(中)
Bicycle Rental Shop 專案在上個章節完成基本練習，最後章節將延伸介紹 Vuex 進階 actions, modules。
📋 目錄
[實作] actions 介紹與操作
actions 介紹 📄
action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，調用context.commit提交一個 mutation，另外也可以使用 Payload 傳入額外參數。取得 state 和 getters 需通過 context.state和context.getters。觸發 action 時，透過store.dispatch方法。
actions 用法類似於 mutations，不同之處有兩點：(1) action 提交 commit 給 mutations ，而不是直接變更 state。(2) actions 可以包含任意異步操作。第二點在於呼叫 API 等待回應或運算資源消耗較多的功能時，需用到非同步處理。
Hands on 操作 📐
針對目前 mutations，挑選 resetAllData 函式搭配非同步 setTimeout實作。
step 1 actions 新增非同步操作
store/index.js 檔案 actions 加入 resetAllDataAsync 函式，代入 context 參數，加上 context.commit("resetAllData")，並設定等待 3000 毫秒 ⌛️ store/index.js 檔案 actions 部分程式碼如下：
step 2 修改 TotalIncome.vue
Reset All 按鈕原本是直接 commit 給 mutations，改成 dispatch 給 actions (由 actions commit 給 mutations)。完整 TotalIncome.vue 檔案程式碼如下：
此時開啟瀏覽器，按下 Reset All 按鈕，會等待 3 秒⌛️
再執行 resetAllData 動作。
🔖 補充說明
mapActions輔助工具：若有許多mapActions，可以使用mapActions搭配展開運算符，跟一般actions一樣可以傳進參數Payload。
e.g. methods:{
...mapActions(['resetAllDataAsync'])
}
即代表下方行程式碼：
resetAllDataAsync(payLoad){
this.$store.dispatch('resetAllDataAsync',payload)
}[實作] modules 介紹與操作
modules 介紹 📄
大型專案 store 中 state, actions , mutations, getters 數量越來約多， Vuex 提供 modules 方便管理，將 store 中各類的 state 分類管理。使用了 modules 後，modules 中的 actions , mutations, getters 都是全域共用的。為了避免同樣名稱全域共用下造成問題，可以採用不同命名或是在 module 中加上 namespaced:true。
Hands on 操作 📐
目前 Bicycle Rental Shop 專案檔案功能並不複雜，為了練習拆分 modules，先加入一個獨立的新功能：getNow 取得實際時間。
step 1 新增getNow功能
在 App.vue 檔案新增getNow功能，先在畫面下方加入 Current Time，下方加入 getNow 函式。其中，setInterval 每一秒都會更新一次最新時間。App.vue 檔案中 template & script 程式碼如下：
step 2 拆分 store/index.js
在 store 資料夾底下加入 modules 資料夾(與index.js在同一層)，並在modules 資料夾下加入 mainFunc.js 以及 timeStamp.js 檔案。
mainFunc.js 會放置原本 index.js 檔案內容，而 timeStamp.js 則將上個步驟寫在 App.vue 檔案中的 state, actions, mutations 拆分出來放置。原本的 store/index.js 檔案只負責 export modules。
store/index.js 完整程式碼如下：
mainFunc.js 完整程式碼如下：
timeStamp.js 完整程式碼如下：
此時若查看瀏覽器，會出現許多錯誤，因為 App.vue 以及 TotalIncome.vue 檔案還沒有調整。
step 3 調整 App.vue & TotalIncome.vue
App.vue 檔案部分程式碼拆分到 timeStamp.js，以及區分 modules 後，state 調用需加上 modules 名稱。 TotalIncome.vue 也需配合 modules 做更改。
App.vue 完整程式碼如下：
TotalIncome.vue 完整程式碼如下：
依循上述步驟，modules 已經設定成功，Bicycle Rental Shop 專案已完成 Vuex 狀態管理並可以如期運行👏
Vuex 系列小結
先認識 Vuex 並搭建環境，再經由一步步實作，從基本的 state, mutations, getters 到進階的 actions, modules 對 Vuex 設定更熟悉。此系列練習大多著墨在基礎概念，若想延伸學習可以參考 Vuex 官方文件。
最後，附上 Bicycle Rental Shop (Vuex版本) 專案的 GitHub 檔案連結 🔗 ，專案資料夾名稱：vuex-practice-Bicycle 。有任何指點或建議都可以在下方留言～🙏
🎏 Thanks for taking the ride.
