Currently, I am utilizing Vuex for state management within my VueJS 2 application. Within the mounted property of a specific component, I trigger an action...
mounted: function () {
this.$store.dispatch({
type: 'LOAD_LOCATION',
id: this.$route.params.id
});
}
...this triggered action involves using axios to make an API call in order to retrieve details regarding the location.
LOAD_LOCATION: function ({ commit }, { id }) {
axios.get(`/api/locations/${id}`).then((response) => {
commit('SET_LOCATION', { location: response.data })
}, err => {
console.log(err);
});
}
The mutation is defined as follows:
SET_LOCATION: (state, { location }) => {
state.locations.push(location);
}
Initially, this process makes complete sense when navigating to a particular location for the first time. But what if a user navigates to /locations/5, then moves around within the app, and returns to /locations/5 after some time? Would it be advisable to check if the location is already stored in state.locations before making another API call? Perhaps even better would be to determine the "freshness" of the location data and refresh it only after a certain period has elapsed?
Edit: Are there established patterns typically followed for such scenarios with Vuex? It appears to be a common issue, but I'm unsure if incorporating logic to manage presence/staleness directly into the action is a robust approach.