Как в Vue.js выполнить один actions после выполнения предыдущего?

Question

Имеется следующий код. При инициализации приложения я получаю массив объектов с информацией по прокси. Запуск 1 диспетчера дает мне массив из 100 объектов.

Во 2 действии getCountryList я хочу обработать данный массив из 100 объектов и получить новый массив из которого я буду получать в дальнейшем список стран и сколько всего прокси по странам.

По факту получается, что во время выполнения 2 действия, на обработку я получаю пустую строку. Я так понимаю, что эти процессы как-то идут парралельно, в итоге 1 действие еще не успело вызвать мутацию и свормировать нужное состояние (массив из 100 объектов) и уже вызывается 2-е... в итоге я получаю пустое значение во 2 действии.

Как мне выстроить цепочку вызовов, т.е. 2 действие вызывается, только после того, как завершится 1-е действие?

У меня есть подозрение, что можно все либо одним действием сделать, либо использовать промисы. Подскажите как реализовать такой момент

EDIT: как и подозревал экшены асинхронные, поэтому не работает как надо.

Теперь вопрос, как организовать что-то подобное, но без сетТаймаута, чтобы 2 dispatch запускался после 1-го, иначе setTimeout в любой момент может подвести

created() {
this.$store.dispatch("getProxyList"); 
setTimeout(() => this.$store.dispatch("getCountryList"), 1000);
},

//Инициализация App.vue
created() {
    this.$store.dispatch("getProxyList"); 
    this.$store.dispatch("getCountryList");

  },
//Хранилище
const state = {
  listProxy: "",
  countries: "",
  proxyInfo: {},
  proxyCountry: [],
  proxyCountryCounter: 0
};
const mutations = {
  UPDATE_LIST_PROXY(state, payload) {
    state.listProxy = payload;
  },
  UPDATE_LIST_COUNTRY(state, payload) {
    state.countries = payload;
  },
  UPDATE_PROXY_INFO(state, payload) {
    state.proxyInfo = payload;
  },
  UPDATE_PROXY_COUNTRY(state, payload) {
    state.proxyCountry = payload;
  },
  UPDATE_PROXY_COUNTRY_COUNTER(state, payload) {
    state.proxyCountry = payload;
  },
};
const actions = {
  getProxyList({ commit }) {
    axios
    .get("proxy.json")
      .then(response => {
        commit("UPDATE_LIST_PROXY", response.data); // здесь я формирую state.listProxy
      });
  },
  getCountryList({ commit }) {
      // .get("https://proxyfordevelopers.com/api/proxies/?format=json")
      //TODO: Убрать лишний запрос. Данные можно получать из общего списка прокси
        console.log(state.listProxy) // Вот здесь по идее мне нужен listProxy, чтобы разобрать его на другой массив, а по факту получаю пустое состояние
        let countryObj = {};
        let proxyList = state.listProxy;
    for (let i = 0; i < proxyList.length; i++) {
      let key = proxyList[i].country;
      countryObj[key] = (countryObj[key] === undefined) ? 1 : countryObj[key] + 1;
    }

    let countryArr = [];

    for (var key in countryObj) {
      countryArr.push({
        name: key,
        count: countryObj[key]
      })
    }
    commit("UPDATE_LIST_COUNTRY", countryArr);

},
  setProxyInfo({ commit }, id) {
    let proxyList = state.listProxy;
let currentProxyInfo = proxyList.find(item => item.id === id);
commit("UPDATE_PROXY_INFO", currentProxyInfo);

},
  setCountryPhoxy({commit}, country) {
    let listCountryProxy = state.listProxy.filter(item => item.country === country)
    commit("UPDATE_PROXY_COUNTRY", listCountryProxy);
  },

};
const getters = {
  listProxy: state => state.listProxy,
  countries: state => state.countries,
  proxyInfo: state => state.proxyInfo,
  proxyCountry: state => state.proxyCountry,
  proxyCountryCounter: state => state.proxyCountry.length
};
//--------

Answer 1

created () {
  this.$store.dispatch("getProxyList").then(() => {
    this.$store.dispatch("getCountryList");
  });
},

  // нужно вернуть промис(запрос к серверу через axios)
  getProxyList({ commit }) {
    return axios
    .get("proxy.json")
      .then(response => {
        commit("UPDATE_LIST_PROXY", response.data); // здесь я формирую state.listProxy
      });
  },

Если не сработает, то добавьте еще

commit("UPDATE_LIST_PROXY", response.data);
// вот это
return response.data

Answer 2

Действия в vuex это промисы, они всегда асинхронные, поэтому мождо дождаться результата используя then.

created () {
  this.$store.dispatch('getProxyList').then(result => {
    // в result записан результат выполнения getProxyList
    this.$store.dispatch('getCountryList')
  });
},

Советую также использовать async/await вместо then если он у Вас настроен:

async created () {
  const result = await this.$store.dispatch('getProxyList')
  await this.$store.dispatch('getCountryList')
},