1

I have a vue spa app. I fetch data for the page in the created hook

My question is how can i avoid fetching data again for the page that has been previously navigated away from if back button is pressed

EDIT

my app is in vue 3 I later used < keep-alive > which worked but am unable to clear the cache even when using max prop on the < keep-alive :max="2" > component

Sunny
  • 103
  • 1
  • 1
  • 11

2 Answers2

2

Quite simply, by caching it.

There are several ways to implement some kind of caching, but it largely depends on your current setup.

If you are not using vue-router and the back button causes your page to re-render, you will need to persist the data some other way, such as by using localStore. If you're using vuex, and you want to persis the data, you can try vuex-persistedstate. I'm assuming though that you are not looking to persist the data and the page is not re-loading on redirect.

If you are already using vuex, you can cache the data in the store.

Another option is to use the keep-alive component

If you don't want to rely on a 3rd party tool, you can also wrap your API call with a caching function.

Here is what that may look like. When the data is loaded, it gets cached, and when the cache exists, the cached result is returned as a promise, so that the method returns the same type either way.

let getMyDataCache = null;
export const getMyData(){
  if (getMyDataCache) return new Promise((resolve)=>resolve(getMyDataCache));
  return fetch('http://example.com/movies.json')
    .then(response => response.json())
    .then(data => {
      getMyDataCache = data;
      return getMyDataCache;
    });
}
Daniel
  • 34,125
  • 17
  • 102
  • 150
  • I have look into vue keep-alive though it worked but am left with invalidating the cache data – Sunny Feb 17 '21 at 12:20
  • `` should work for you as-well, can you clarify what's not working? Even if you use `mounted` lifecycle hook, that should only fire once. Are you using `vue-router`? – Daniel Feb 17 '21 at 16:47
  • yes am using vue-router and keep-alive worked but all pages gets cached and i don't know how to clear the cache or invalidate the cache my app is in vue 3 – Sunny Feb 17 '21 at 18:33
  • Hard to tell without seeing some code, as that will depend on your implementation. However one trick that works for component reloading do is to alter the `:key`, which will reload it. Try using `` (where num is a number defined in data) then add a button with `` when the key changes, the cached component will be replaced – Daniel Feb 17 '21 at 20:18
-2

You could use vuex to store the state for your page - then in your created() hook, check if the state has been populated before fetching the data.

To clarify (since this answer is getting downvoted and I'm not sure why): you need to store the fact that you have already fetched your data somewhere. You can't do it inside your component since it will be remounted when you return to the page. If you have a state management pattern in place (e.g. with Vuex), you can store your data there so that when the component is remounted, you can check your store to see if the data has already been fetched before you try to fetch it again.

If you are using vue-router, the answers on this thread might help you instead: How to make certain component "keep-alive" with router-view in Vue 3?

Hannah
  • 1,123
  • 6
  • 5