【Vue筆記】呼叫 vue bootstrap modal 按下確認後執行跨元件函式

邏輯順序

要刪除項目
點選刪除按鈕後跳出確認 modal (vue bootstrap)
有確認與取消按鈕，按下確認按鈕才執行刪除函式並關閉modal，取消鍵則不動作且關閉modal。

會使用到的元件

Modal : 在main.vue裡import的modal
store : Vuex store
元件A: 呼叫modal且操作的元件

第一種寫法

(點下刪除按鈕) 跳出確認 modal 時，啟動一個 setInterval，setInterval裡加一個 if 判斷 store 裡的布林變數(預設false)，函式會固定頻率嘗試送出刪除函式，但會被 store 的這個變數阻擋。
按下 modal 裡的確認按鈕，會將控制 setInterval 裡的 if 判斷裡的變數覆值為 true ，則下一次的 setInterval 執行時，就會進入 if 裡執行刪除函式，然後再次將控制變數覆值為false。
若按下取消按鈕，則clearInterval(timerId)並關閉modal。

錯誤的情況:

把變數和函式寫進utils.js裡的prototype上，會clear不到，因為prototype是每個物件都給這個方法，所以每次呼叫一定都是不同的id。

(一定會有大大覺得 “這不是廢話嗎?” ，但對 YUKI 這種不停吸收新知識但還沒機會用到的菜鳥工程師來說，會需要不斷嘗試後突然頓悟這件事QQ)

第二種寫法

簡單很多!! 也不用想方設法取得 setInterval 的 id。

點擊刪除按鈕跳出modal，且把刪除選項的函式存進store的一個變數。
按下確認按鈕的話就執行這個store變數裡的刪除函式。結束!!!

筆記到這邊結束囉，小聊一些心得:

寫Vue的路上總是常寫常新，不同需求不停激勵腦袋高速運轉來找到合理的處理邏輯，這次的問題也是先從同事寫過的方式下手去修改，總覺得用呼叫setInterval 去處理好像有些浪費效能? 是個很粗曠的作法XD

於是左思右想了一整天，在第二天早上突然靈光一現了第二種作法!
但當然僅限同樣的呼叫順序與情況下囉~~(菜鳥需要疊甲XD
說實話也不難寫，但當下看著同事的程式碼好像就會重複困在那裡，覺得一定要用這樣的方式才行吧?
總而言之，YUKI 的習慣就是先把手邊有的方式套上去、能運作，再安心思考第二種可能的方式，專案時程跟心理壓力會比較小^^

Yuki Hiew