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来达到我们的目的