Vue中如何根据Vuex计算属性切换Axios获取的XML数据节点？

我是Vue新手，目前通过Axios和xml2js从XML获取数据，流程正常。但希望通过绑定Vuex状态的计算属性currentStep，切换解析XML时获取的数据节点：当currentStep为'departures'时取result.flugplan.abflug[0].flug，否则取result.flugplan.ankunft[0].flug，但尝试后无法生效。

现有代码 #

计算属性 #

currentStep: {
  set (val) {
      this.$store.commit('setCurrentStep', val)
      
  },
  get () {
      return this.$store.state.currentStep
  }
}

获取并解析数据的方法 #

getData() {
  axios.get("https://something.xml").then((response) => {
    this.parseXML(response.data).then((data) => {
      this.flightInformations = data

    })
  })
},
parseXML(data) {
  return new Promise((resolve) => {
    let parser = new xml2js.Parser({
      trim: true,
      explicitArray: true,
    });
    parser.parseString(data, function (err, result) {
       

     let obj = null
     obj = result.flugplan.abflug[0].flug;
      
      
      
      let flight_dates = {};
     
      for (let item of obj) {
        let flight_date = item.datum.join().toString();
        
        if (!flight_dates[flight_date]) {
          flight_dates[flight_date] = [];
        }
        
        flight_dates[flight_date].push({
          flightNr: item.flugnr.join().toString(),
          flightPlace: item.ort.join().toString(),
          flightPlan: item.plan.join().toString(),
          flightExpected: item.erwartet.join().toString(),
          flightDate: item.datum.join().toString(),
        })
      }
      resolve(flight_dates);
    })
  })
}

尝试修改的代码 #

let obj = null

     if (this.currentStep === 'departures') {
      obj = result.flugplan.abflug[0].flug;
     } else {
      obj = result.flugplan.ankunft[0].flug;
     }

问题原因与修复 #

1. 上下文丢失：parser.parseString的回调用了普通function，导致this指向不是Vue组件实例，this.currentStep无法获取正确值。改用箭头函数可保留组件上下文。
2. 未响应步骤切换：当前仅调用getData时才解析数据，切换currentStep不会触发重新解析，需监听currentStep变化自动重新处理数据。

修复后的代码 #

1. 修复回调上下文

parseXML(data) {
  return new Promise((resolve) => {
    let parser = new xml2js.Parser({
      trim: true,
      explicitArray: true,
    });
    // 改用箭头函数保留组件this上下文
    parser.parseString(data, (err, result) => {
      let obj = null
      if (this.currentStep === 'departures') {
        obj = result.flugplan.abflug[0].flug;
      } else {
        obj = result.flugplan.ankunft[0].flug;
      }
      
      let flight_dates = {};
     
      for (let item of obj) {
        let flight_date = item.datum.join().toString();
        
        if (!flight_dates[flight_date]) {
          flight_dates[flight_date] = [];
        }
        
        flight_dates[flight_date].push({
          flightNr: item.flugnr.join().toString(),
          flightPlace: item.ort.join().toString(),
          flightPlan: item.plan.join().toString(),
          flightExpected: item.erwartet.join().toString(),
          flightDate: item.datum.join().toString(),
        })
      }
      resolve(flight_dates);
    })
  })
}

2. 添加步骤切换监听

在组件的watch选项中新增监听：

watch: {
  currentStep() {
    // 切换步骤时重新获取解析数据
    this.getData();
  }
}

额外优化：缓存原始XML数据

避免重复请求接口，提升切换效率：

// 组件内新增变量存储原始XML
rawXMLData: null,

// 修改getData方法
getData() {
  if (this.rawXMLData) {
    // 已有缓存，直接解析
    this.parseXML(this.rawXMLData).then((data) => {
      this.flightInformations = data;
    });
    return;
  }
  axios.get("https://something.xml").then((response) => {
    this.rawXMLData = response.data;
    this.parseXML(response.data).then((data) => {
      this.flightInformations = data;
    });
  });
}

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