vue项目computed计算属性无法监听到数组对象内部变化解决方案

问题描述

比如计算属性检测列表数据tableData，且vue store内部有存储改字段，但是修改tableData后，store内部有更新成最近数据，但是页面内computed未检测到数组变化，单独拿到watch监听也无效。

解决思路

看了很多篇文章，有些用this.$set(this.arr, 0 ,false)方式解决，但是我是整个数组变化，再循环一遍数组也不划算，于是就想到增加一个变量，初始值为0，只要重新请求列表数据（无论是增加修改删除都会更新列表数据接口），该变量都会加1，然后就可以通过watch监听该变量变化然后重新获取数组。具体代码如下：

//store里面
const state = {
    invoiceIndex: 0,//避免对computed无法监听报销列表数组内部状态变化，增加变量
}
const actions = {
  async getDailyDispatchList({
		   commit,state
	   }, data) {
	let res = await reimburseApi.getDailyDispatchList(data);
	if(res.code === 200){
	    //确定重新请求列表后，给变量加1，然后可以去页面内部watch监听
		commit('setState', {
				key: 'invoiceIndex',
				val: state.invoiceIndex+=1
		})
        //……其他操作代码
	}
  }
}

//vue页面内部
watch:{
      invoiceIndex: {
              handler(){
                  //此处需要直接从store里读取，在computed中读取还是没有更新
                  let list = store.state["reimburse"].dailyDispatchTableData;
                  if(!list || list.length<=0){
                      this.tableDataList = [];
                      return;
                  }
                  this.tableDataList = list;
              },
              immediate: true
          }
},
computed: {
      ...mapState(moduleId, {
          invoiceIndex: state => state.invoiceIndex,
          dailyDispatchTableData: state => state.dailyDispatchTableData,//这里没更新
      }),
},

如有疑问，欢迎沟通，欢迎大佬指导更好的书写方式