Vuex returning some data back the the component

Question

I have an axios call in my vuex actions

  return axios({
      method: 'get',
      url: `/myurl`,

    }).then(function (response) {
      context.commit('value', response.data.data);
    }),

However this is called in my component

this.$store.dispatch("fetchmystuff")

How do I return a value to the component?

In the past I have attached the then() to the dispatch

 this.$store.dispatch("fetchmystuff")
    .then(function (response) {
     //do some component stuff
 }),

but I would like to run the commit first in vuex, then return something to the component.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You've dispatched the action fetchmystuff. From within your component, you will want to either.

1. query the store for the state of `value`

computed: {   
  value() {    
    return this.$store.state.value
  } 
}

2. call a getter which gets the state of `value` from a computed property

in component

computed: {   
  value() {    
    return this.$store.getters.value
  } 
}

in store getters.js

getters: {
  // ...
  value: (state, getters) => {
    return getters.value
  }
}

The dispatcher/action shouldn't need to access to the component
(as state is only set in store via mutations/commits, and have state passed to other components via getters).

This allows a decoupling of concerns between the store and the component parts of your application.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 16, 2019 at 11:44

Denis Tsoi

10.6k8 gold badges42 silver badges61 bronze badges

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

5 Comments

TommyD Over a year ago

Thanks that was kind of how I did it in other places, it just seemed an 'alternative' way to go! I though I could have done it without checking the $store.state.

Denis Tsoi Over a year ago

Yes you're correct that you can remove the instances of store from the axios fetch method - so this is the trade off you need to make when leveraging Vuex store (reusable methods via actions or leaving the method isolated within a component)

Dong3000 Over a year ago

In my case, the component might exist twice (regular and sometimes in modal div). Both components must have different states, that can be modified by a dispatched functions return value. So one state of value won't work, because in this case, both components values would be the same from $store.state. How can I solve this?

Denis Tsoi Over a year ago

Have you asked this question SO @Dong3000

Dong3000 Over a year ago

@DenisTsoi I've made it concrete here: stackoverflow.com/questions/64842269/…

Collectives™ on Stack Overflow

Vuex returning some data back the the component

1 Answer 1

1. query the store for the state of `value`

2. call a getter which gets the state of `value` from a computed property

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. query the store for the state of value

2. call a getter which gets the state of value from a computed property

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

1. query the store for the state of `value`

2. call a getter which gets the state of `value` from a computed property