Returning data from a Vuex action

Question

Can I return data from a Vuex action or do I need to update the store?

I've got an action defined but it returns no data:

getData() {
    return { "a" : 1, "b" : 2 }
}

Duplicate question: [Returning Promises from Vuex actions](https://stackoverflow.com/questions/40165766/returning-promises-from-vuex-actions) — zcoop98, Apr 15 '22 at 22:25
Don't do this, actions are not supposed to return values https://stackoverflow.com/a/74562954/836723 — Maksim Shamihulau, Nov 24 '22 at 15:28

score 3 · Accepted Answer · edited Apr 15 '22 at 22:11

3

You can actually return data from an action. From the documentation:

Actions are often asynchronous, so how do we know when an action is done? And more importantly, how can we compose multiple actions together to handle more complex async flows?

You should return a promise and the data in the resolve() method:

actions: {
  actionA () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ name: 'John Doe' })
      }, 1000)
    })
  }
}

And use it this way:

store.dispatch('actionA').then(payload => {
  console.log(payload) /* => { name: 'John Doe' } */
})

edited Apr 15 '22 at 22:11

zcoop98

2,590
1
18
31

answered Jan 07 '19 at 09:18

Kordonme

2,314
3
20
32

I don't know if I misunderstood your question. I assumed yout ment Vuex actions and not the `data()` method in Vue. – Kordonme Jan 07 '19 at 09:26
Yes, I was referring to Vuex actions. Thanks. – user3213700 Jan 07 '19 at 10:04

score 0 · Answer 2 · answered Dec 29 '22 at 13:22

Your code will work if the code that calls your action uses either 'await' or a callback.

For example:

const result = await store.dispatch('getData');

The main takeaway being that actions return promises even if the action isn't doing any asynchronous work!

Returning data from a Vuex action

2 Answers2