vue,store中维护的复杂对象被修改后，watch无法监听到

Question

项目中需要在 store 中维护一个如下结构的对象 listObj: {}；

listObj: {
    //"xxx": [],
    //"yyy": []
}

其中key/value键值对为动态新增的；value为数组

mutations 方放如下：

    SET_listObj: (state, {key, list}) => {
      let exList = state.listObj[key] || []
      if(exList && exList.length > 0) {
        exList.splice(exList.length)
      }
      state.listObj[key] = list
    },

调用方页面如下：

  computed: {
    ...mapGetters(['listObj']),
  },
  watch: {
    listObj: {
        handler(val) {
            //断点无法进入......
            console.log(val)
        },
        deep: true
    },
  },

当 store 中的listObj进入新增 key/value时，如上监听始终无法执行

Answer 1

import Vue from 'vue';

SET_listObj: (state, {key, list}) => {
  if (!state.listObj[key]){
    Vue.set(state.listObj, key, []);
  }
  let exList = state.listObj[key]
}

Answer 2

是不是因为你“其中key/value键值对为动态新增的”，所以监听不到，试试给listObj 初始值，然后改变，能否监听到。

vue双向数据绑定对于数组和新增对象属性不能监听的解决办法