Vue/Vuex 必须点击两次才能更新数组

Question

所以我是 Vue/Vuex 的新手，我完全不知道我在这里做错了什么。 我有一个点击时调用的方法，如下所示：

Export (item) {
  this.exportObj = {
    start: this.dates[0],
    end: this.dates[1],
    userid: item.id,
  };

  this.getAllByFilter(this.exportObj);

  if (this.dateRangeText == "No dates seleceted") {
    this.disValue = true;
  } else {
    this.disValue = false;
  }

  if (this.exportData.events.length > 0) {
    this.exportData.events = [];
    console.log("Emptyed array because there was already data there!");
  } else {
    console.log("Well this was empty already :O");
  }

  for (let i = 0; i < this.allEvents.length; i++) {
    var timeStart = new Date(this.allEvents[i].start).getHours();
    var timeEnd = new Date(this.allEvents[i].end).getHours();
    var hourDiff = timeEnd - timeStart;

    this.exportData.events[i] = {
      start: this.allEvents[i].start,
      end: this.allEvents[i].end,
      title: this.allEvents[i].title,
      userid: this.allEvents[i].userId,
      hours: hourDiff,
    };
  }

  this.exportData.title = "Report for " + item.firstName + " " + item.lastName + " for dates in range " + this.dateRangeText;
  this.exportData.fileName = item.firstName + " " + item.lastName + " - " + this.dateRangeText;
  this.exportData.worksheetName = item.firstName + " " + item.lastName + " " + this.dateRangeText;
},

但是，我将数据发送到 (exportData.events) 的数组在我单击该按钮两次之前不会填充。我正在为 allEvents 使用 getter，并且承诺已完成。正如您在下面看到的，第一次实现了承诺，但是 for 循环中的数据不会返回到空数组中。任何建议将不胜感激。

商店：

const state = {
    events: []
};

    const actions = {
        getAllByFilter({ commit }, exportObj) {
        calendarService.getAllByFilter(exportObj)
            .then(
                events => commit('getAllSuccess', events),
                error => commit('getAllFailure', error)
            );
        },
    };
    
    const getters = {
    allEvents: state => state.events
    };
    
    const mutations = {
    getAllSuccess(state, events) {
        state.events = events;
        },
    };
    
    export const calendar = {
        namespaced: true,
        state,
        actions,
        mutations,
        getters
    };

Answer 1

问题出在这里：

this.getAllByFilter(this.exportObj);

此操作中的 Promise 未在任何地方处理。返回你的 Promise 然后等待它。

const actions = {
    getAllByFilter({ commit }, exportObj) {
    return calendarService.getAllByFilter(exportObj)
        .then(
            events => commit('getAllSuccess', events),
            error => commit('getAllFailure', error)
        );
    },
};

将您的导出方法修改为：

async Export (item) {
  this.exportObj = {
    start: this.dates[0],
    end: this.dates[1],
    userid: item.id,
  };

  await this.getAllByFilter(this.exportObj);
  ....

在 Export 方法完成其工作之前显示进度条、加载对话框或禁用按钮。