How to return promise result from Vuex action instead of the promise itself?

Question

I have an action in my vuex store:

export const actions = {
  myaction() {
    return 'foo'
  }
}

Can I get the promise result (here foo) in the mounted() life cycle hook and display it in the console ? If yes, how ?

I tried this:

mounted() {
  console.log(
    this.$store
      .dispatch('myaction')
      .then(res => res)
  )
}

But it returns the promise instead of the promise result I'm expecting.

Answer 1

Either of these should work:

Using .then():

mounted() {
  this.$store
    .dispatch('myaction')
    .then(res => console.log(res));
}

Or if you're using ES2017 or later (or some compatibility tool like Babel), then you can use async/ await:

async mounted() {
   const res = await this.$store.dispatch('myaction');
   console.log(res);
}

As @Dan mentions below, whilst this will return you the value of the Promise, this is not the intended usage of Vuex, which prefers all data to be saved to and accessed from Vuex's state.

It would be better to mutate the store in your action to save the value and then use a computed property in your component to retrieve it from state, either directly or through a getter. This can be done very cleanly with the mapGetters Vuex helper function.