Returning axios promises from vuex action

Question

I can't figure out, if it's a bad approach to have vuex actions returning axios promises like the example below. The reason why I do it, is because I need some values from the vuex state in the request. Can anyone tell me, if this is bad to do or totally fine? :)

/* Vuex action */
fetchSomething({ state }, id) {
  return getSomething(
    id,
    state.basket.shipping,
    state.basket.billing);
},

/* Method in vue component */
someMethod() {
  this.$store.dispatch('fetchSomething')
    .then(res => console.log(res));
}

Can you clarify a bit what you mean by "I need some values from the vuex state in the request"? — Lassi Uosukainen
@LassiUosukainen I need some values saved in state as get parameters for the request — Kris D. J.
There are multiple ways to access the state before the request. Returning a promise from Vuex action however, is related to what happens after the request. It is not related to sending the request in any way. — Lassi Uosukainen

Lassi Uosukainen Lassi Uosukainen · Accepted Answer · 2019-03-08T09:28:02

I don't see the point of doing this. The point of a Vuex action is to do the asynchronous job of retrieving the data and then to mutate the Vuex store.

Once the store has been mutated, you can access it from your Vue component. As Vuex is part of the Vue ecosystem it follows the same reactivity principles as Vue. If you need to execute something once you have retrieved the data you can set a watcher on the variable you are retrieving or more commonly just use it as a computed property.

Returning axios promises from vuex action

1 Answers