.reduce()意外修改原始数据导致VueTables-2切换视图时佣金数值异常

JavaScript中对象属于引用数据类型，你在reduce分组时直接将main_data中的原始对象curr推入结果数组，后续修改item.commission时会直接修改main_data里存储的原始数据，导致切换回单个商品视图时，源数据已经被污染，无法恢复初始值。
另外你定义的const tmp_data = this.main_data属于无效写法，只是给原始数组新增了一个引用别名，没有做任何数据拷贝，起不到隔离源数据的作用。

修改type_change方法的相关逻辑，所有操作均不直接修改main_data的原始值：

type_change(newVal) {
  console.log(newVal, 'TYPE CHANGE');
  console.log(this.main_data);
  switch (newVal) {
    case 'articles':
      // 浅拷贝原始数组赋值，避免后续操作污染源数据
      this.vuetable_data = [...this.main_data]; 
      break;
    case 'articles_grouped':
      this.vuetable_data = this.main_data.reduce((acc, curr) => {
        var item = acc.find(aaa => aaa.article_code === curr.article_code);
        if (item) {
          item.commission = (Number(item.commission) + Number(curr.commission)).toFixed(2);
        } else {
          // 浅拷贝原始对象再推入结果数组，修改时不会影响源数据，低版本兼容可替换为Object.assign({}, curr)
          acc.push({...curr});
          // 如果商品对象有深层嵌套属性，用深拷贝，你项目已引入lodash，可改为：
          // acc.push(_.cloneDeep(curr));
        }
        return acc;
      }, []);
      break;
    case 'invoices': 
      break;
    case 'invoices_by_clients': 
      break;
    default: 
      break;
  }
  console.log(this.main_data);
},

内容的提问来源于stack exchange，提问作者Sebas