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）的数组在单击两次之前没有填充。我正在为所有事件使用吸气剂，并且承诺已实现。正如您在下面看到的那样，promise是在第一次实现的，但是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);

此动作中的承诺没有在任何地方处理。返回您的承诺，然后等待。

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方法完成其工作。

必须单击两次以使Vue / Vuex更新阵列

1 个答案: