Vuex - дождаться вызова API и начального хранилища перед работой с данными mapState?

Question

Как мне подождать / дождаться вызова API-интерфейса slow-i sh к fini sh и зафиксировать сохранение перед выполнением каких-либо действий с объектом хранилища?

Например, в created() в Приложение. js Я делаю следующее, и если я не заключу свои функции преобразования в тайм-аут, данные еще не зафиксированы, и поэтому они не работают.

Приложение. js

created: function () {
    this.$store.dispatch("loadData"); // loads all the data and commits to store as state.eventsData

    setTimeout(() => { // if I don't wrap these in a timeout, this.eventsData is not available for the functions
      this.transformDataForGrid(); // transforms eventsData and commits it as gridData
      this.transformDataForCalendar(); // transforms eventsData and commits it as calendarData
    }, 500);
  },
methods: {
  transformDataForGrid(){// lots of manipulations of eventsData then state.commit("gridData", newdata},
  transformDataForCalendar(){},// lots of manipulations of eventsData then state.commit("calendarData", newdata},
}

Answer 1

Я понял это. Я создал логический элемент хранилища с именем loading и инициализировал его как истинный в начале (загрузка страницы). Также есть мутация под названием setLoading. В приложении vue created(){} я отправляю действие для вызова api ax ios. В .then этого я фиксирую данные в хранилище, а также фиксирую setLoading как false. Затем возвращаюсь в приложение. vue Я mapState loading и «слежу» за загрузкой, чтобы при его изменении я мог отключить свои функции преобразования.

Приложение.

  computed: mapState(["loading", "eventsData"]),
  watch: {
    loading() {
      if (!this.loading) { // when loading changes to false in store/index.js I fire off my functions
        this.transformDataForGrid();
        this.transformDataForCalendar();
      }
    },
  },
  created: function () {
    this.$store.dispatch("loadData"); // load data
  },
methods: { 
  transformDataForGrid(){ // do stuff },
  transformDataForCalendar() { // do other stuff },

}

магазин / индекс. js

  mutations: {
    ... // other mutations
    setLoading(state, loading) {
      state.loading = loading;
    },
  },
  actions: {
    loadData({ commit }) {
      axios
        .get("/data/eventsData.json")
        .then((response) => {
          commit("setEventsData", response.data);
          commit("setGridData", response.data);
          commit("setCalendarData", response.data);
          commit("setLoading", false); // loading is done
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },