vue2中多次请求导致数据污染

今天遇到一个很神奇的bug，代码反复检查了半天，也调试了半天都没有发现问题在哪里，最后才发现是数据杯污染。。。。。

原代码

// 附件上传方式
async initAppattachwayList() {
  this.dictparams.dictkey = "APP_UPLOAD_WAY";
  await getDictList(dictparams).then((res) => {
    if (res.success) {
      let temp = res.data;
      if (temp) {
        temp.forEach((item) => {
          item["value"] = parseInt(item.value);
        });
      }
      this.appattachwayList = temp;
    } else {
      this.$message.error("获取附件上传方式失败！");
    }
  });
},

:::info
说明：此页面多次使用了 getDictList 方法和多次修改了 this.dictparams.dictkey 的值
:::

分析

由于 dictparams 对象多次被调用和修改，如果说对象结构没有改变的话，它里面的字符串也有可能不变，这就导致不正确的缓存行为，潜在数据杯污染的可能性

解决

在方法中重新定义一个对象用来接收这个字符串，从而避免数据污染问题
话不多说，直接上代码

// 附件上传方式
async initAppattachwayList() {
  let dictparams = { dictkey: "APP_UPLOAD_WAY" };
  await getDictList(dictparams).then((res) => {
    if (res.success) {
      let temp = res.data;
      if (temp) {
        temp.forEach((item) => {
          item["value"] = parseInt(item.value);
        });
      }
      this.appattachwayList = temp;
    } else {
      this.$message.error("获取附件上传方式失败！");
    }
  });
},