VueX中state變化捕捉不到_getters監測不到state的變化

原因

可能有多種原因, 現在我說一下我碰到的一種情況: state種有一個變量叫state,它是一個json對象, 可把我害慘了.因為他這個json長這個樣:

messageBox:{
   friendId1: [ {message1}, {message2}, ... ],
   friendId2: [ {message1}, {message2}, ... ],
   friendId3: [ {message1}, {message2}, ... ],
   friendId4: [ {message1}, {message2}, ... ]
}

當我在mutation中改變好友message列表的時候, 無論在Vue組件中使用watch, 亦或者在VueX中使用getters, 都不能夠在messageBox變化的時候觸發監聽器. 網上找了很多解決方法,傷透了腦筋. 原因是messageBox對象的內容改變了, 但是messageBox指向的內容還沒有變化. 所以getter或computed屬性不會在messageBox改變的時候改變.

solution1(簡單但消耗性能)

將messageBox賦值為字符串形式, messageBox = " {} ", 隨后在mutation中改變messageBox的時候, 使用JSON.parse轉換為json格式, 更改后在用過逆運算JSON.Stringify轉化為字符串, 這個時候getters就可以自動捕獲到state中的變化了

solution2(性能幾乎不受影響)

第二種方法就是在mutate messageBox時候給一個信號量, 告知getter要重新計算並向其他component傳遞新值了!
例如我的一個getter是這樣的

getActiveMsgList(state,activeId) {
      return state.messageBox[ activeId ]
    }

那么在修改messageBox的方法中, 就應該傳遞一個信號量singnal, 每次修改時候都將singnal重新賦值, 然后將上面的一段代碼改成:

getActiveMsgList(state,activeId) {
      return state.messageBox[ activeId ].concat(state.singnal)
    }

因為有一個新的singnal值傳入, 我們就可以在想要這個getter觸發的時候, 通過重新賦值singnal來達到我們的目的