前言

事情的經過是這樣的,專案裡有一個全域性使用的websocket,開始的時候websocket的初始化和接收message都寫入到了App.vue的methods裡了. websocket接收到訊息後會統計數量, 數量儲存到了vuex裡. 這時候就發生了一個詭異的事情. 通過this.$store.dispatch("fun")去更新vuex中的資料. 會出現this.$store.dispatch呼叫的action函式被執行了兩次的問題,怎麼找原因都無果,google更是沒有任何頭緒

websocket的回撥message如下

vuex的store定義是這樣的

大概邏輯就是每次來訊息,我給變數自增1.

發現問題原因

偶然的一次列印中,我發現, 就算if的條件為假, if裡面包裹的this.$store.dispatch函式還是會被呼叫, 只有把this.$store.dispatch註釋掉,才不會執行action裡的函式. 這下就尷尬. 原因不詳

解決辦法

把websocket的程式碼全部移入到Home.vue, 問題解決

總結

不要在App.vue裡寫邏輯程式碼,App.vue就充當專案入口即可.