Vue router and recieving data from store

Question

I need your help.There is a Vue app where I use vuex store and vue-router. The problem is that I get store data from API calls and if I navigate to blabla/edit-profile page from somewhere else the user data is already in store and in component I can use this data recieved by getter. But if I reload the page getters in create or mount method doesn't contain any data. But if look in Vuex dev tool I can see fetchedd data. How can I fix this behavior?

Are you making sure the API calls are completed before the page is loaded? It sounds like it may be creating/mounting the page before the API calls have completed, so there wouldn't be any data yet - then by the time you look in the dev tool it has loaded. Could easily be wrong, but that's just my guess from what you describe. — Jayem163
are the API calls in the first page (i.e. /blabla) or are they in App.vue (or wherever you've got the <router-view> component?) — LShapz
Perhaps you can get rid of the getters inside created and mounted hooks and only use them inside the template ? — IVO GELOV
The problem is that API calls is not finished by th time page is created/mounted. So I need somehow to load them before. Or load data after the page is created/mounted. — zakharov.arthur
In the first page there are calls. Actually that call is added to App.vue. So normally they are made on each. load. — zakharov.arthur

zapping zapping · Accepted Answer · 2018-09-26T04:57:57

Instead of having getters in the mounted or created properties you can try having them in computed properties. That way it will make sure to load your data when it's actually wanted https://vuejs.org/v2/guide/computed.html.

Also you can try checking for Caveats https://vuejs.org/v2/guide/list.html#Caveats . The data might be not be reactive friendly for Vuejs to load it after it gets fetched.

Vue router and recieving data from store

1 Answers