Vue and Vuex state checking

Question

I am experimenting with Vue and VueX and while everything is working well, there is one aspect that is troubling with regards to the store mechanism.

I have a component that loads a set of data from a remote service via axios. It works correctly and is called when the component is created.

export default {
  created() {
    this.$store.dispatch('foo/getBar');
  }
  ...
}

This correctly populates the "bar" variable in the component with the valeus returned from the api call.

When I next view the component in the application, the created function is called again and the api called again, which returns the same data.

What is the best practice way of avoiding subsequent calls until we know that there is different data to be collected? Or more precisely, how do I invalidate data in the store when necessary so that api call is made only when it needs it?

bgsuello bgsuello · Accepted Answer · 2018-12-26T00:31:01

You can put your api call to the parent or root component then place a refresh button to the child component.

Or you can check if variable bar is empty then make the api call.

Vue and Vuex state checking

1 Answers