Vue2 Vuex 遍历存储动态长度数组

---

前言

今天接到一个导出报表的任务, 他们的报表都是单独一个组件, 然后在页面里点击导出可以呼出报表组件, 报表组件又引入了报表展示和报表打印组件, 还内置打印事件处理和下载事件处理.
我这个页面和正常的不太一样, 它是从页面里点击按钮做请求, 然后把结果传入报表展示, 正常的应该是在Vuex的actions里做请求. 这样的话导出的报表需要从页面导出数据, 免不了传值, 我需要从页面用props把值传进报表组件, 之后存进Vuex, 再在展示组件和打印组件使用.

其实我也可以在actions里再做一次请求, 也可以简单很多, 无所谓, 虽然这对执行效率完全没好处而且会因为做了一次完全没用的请求造成代码冗余.

---

一、遍历存储

然后为了坚守原则付出惨痛的代价.
第一次传值我理所当然的把后端给的大数组(里面有很多对象的那种)直接通过props传入报表组件, 然后向Vuex里存了一大堆undefined.
我突然意识到这该是Vue不检测数组和对象的变化导致. 我在向Vuex存储值之前应该watch监听一下, 深度监听…
但是我们肯定是不能确定后端返回的数组里会有多少对象的…不过虽然不能拿到确切的属性值, 我们还是可以拿到这个数组的长度, 那么就可以遍历存储.

另外我们也不能给每个对象里的属性都来一个mutations函数, 但是每个对象里的属性都是一样的, 所以除了新值之外再传一个数组元素下标i, 这样到了store里可以说明当前这个值是要加到queryResult的哪个对象里的.

watch: {
   
  queryResult: {
   
    deep:true,
    handler(newVal) {
   
      //数据长度用props传过来当然也可以
      for (var i = 0; i <= this.queryResult.length; i++) {
   
        this.$store.commit('EBBA020M/SET_DATA_A', newVal[i].dataA, i);
          this.$store.commit('EBBAO2BN/SET_DATA_B',newVal[i].dataB, i);
          this.$store.commit('EBBAO20N/SET_DATA_C', newVal[i].dataC, i);
          this.$store.