Почему не успевают загрузится данные в state?

Question

[manFromRain]

Есть асинхронный action, который вызывает мутацию и обновляет state data:

actions: {
    async fetchData ({commit}) {
      await axios.get('apiurl')
          .then(response => {
            commit('setData', response.data)
          })
    }
  }

В компоненте делаю (компонент НЕ main.js):

computed: {
    ...mapState(['data'])
  },
  methods: {
    ...mapActions(['fetchData'])
  },
  created () {
    if (!this.data) {
       this.fetchData()
      console.log(this.data) //undefined
    }
  }

На этом этапе this.data не успевает загрузится. Подскажите, как правильно дождаться данных и почему так происходит.

Answer 1

[alex]

actions: {
  fetchData({commit}) {
    return axios.get('apiurl').then(response => {
      commit('setData', response.data)
    })
  }
}

computed: {
  ...mapState(['data'])
},
methods: {
  ...mapActions(['fetchData'])
},
async created () {
  if (!this.data) {
    await this.fetchData();
    console.log(this.data)
  }
}