Problem with async await in vue component

Question

I have strange situation, and I can't understand why in different location function works not the same. I would like to retrieve data by axios. When I input my dispatch for axios in mounted hook - it works correct and I can write data from axios to draftData. But, if I wrap my dispatch in function and locate in methods - data don't write in draftData. Why it so? I wrote what was required of me (async/await).

Example.vue

<script>
import LineChart from "../LineChart";
export default {
  components: { LineChart },
   data: () => ({
    loaded: false,
    chartData: null,
    labels:[],
    datasets:[],
    draftData:null,
  }),
  methods: {
    loadIncomings(){
      this.loaded = false
      try {
        let clubId = '5c3c5e12ba86198828baa4a7'
        let dateFrom = '2021-06-01T00:00:00'
        let dateTo = '2022-07-02T23:59:59'
        let groupBy = 'month'
        this.$store.dispatch('loadIncomings', {clubId, dateFrom, dateTo, groupBy})
        console.log('loadIncomings---', this.$store.state.incomings)
        this.draftData = this.$store.state.incomings
        console.log('draftData---', this.draftData)
        this.loaded = true
      } catch (e) {
        console.error(e)
      }
    },
    calcIncomings() {
      if (this.loaded){
        for (let el of this.draftData ) {
          console.log(el)
        }
      }
    }
  },
  async mounted () {
    await this.loadIncomings(),
    await this.calcIncomings()

  },
}
</script>

It looks like so:

"---UpdateIncomingsInfo---" - it is console.log from mutations (vuex). This work after axios.

Please try to reproduce the issue in stackoverflow code snippet or any live editor like codesandbox. — Mina
– Mina, Commented Jul 7, 2022 at 16:55

Kapcash · Accepted Answer · 2022-07-07 16:59:24Z

1

Your loadIncomings function isn't async, so it doesn't return a Promise nor wait for your dispatch to be over.

Try like this:

async loadIncomings(){
  this.loaded = false
  let clubId = '5c3c5e12ba86198828baa4a7'
  let dateFrom = '2021-06-01T00:00:00'
  let dateTo = '2022-07-02T23:59:59'
  let groupBy = 'month'
  try {
    await this.$store.dispatch('loadIncomings', {clubId, dateFrom, dateTo, groupBy})
    this.draftData = this.$store.state.incomings
  } catch (e) {
    console.error(e)
  } finally {
    this.loaded = true
  }
},

You can even return the data from your action directly (in addition to set the store from mutation):

this.draftData = await this.$store.dispatch('loadIncomings', {clubId, dateFrom, dateTo, groupBy})

answered Jul 7, 2022 at 16:59

Kapcash

6,9822 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Spartak Borisov Over a year ago

yes. Now it's work. Thank you! But calcIncomings() not work. May be you know, why..[![enter image description here][1]][1] [1]: i.sstatic.net/jez2R.png

Kapcash Over a year ago

Well first it doesn't need the await, it's not asynchronous. Then try to debug it to see if the boolean is true?

Spartak Borisov Over a year ago

I see. I input calcIncomings() in loadIncomings() and know in starts.

Collectives™ on Stack Overflow

Problem with async await in vue component

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related