Vue-Router Data Fetching only once

Question

I'm currently using Vue Router's beforeEnter hooks to retrieve data for one of my routes.

{
    path: '/A',
    beforeEnter: (to, from, next) => {
      loadData();
      next();
    },
}

A simple example of the flow would be:

Navigate to Route A --> Loading Data
Navigate to Route B
Navigate to Route A --> Loading Data again

How can i prevent the second & obsolete API Call? since it's not important that the data is that up-to-date. I could do: if (!dataIsAlreadyThere) loadData(), but this is somehow not nice to have with many routes. Are there any other solutions or ideas out there?

Can you make this check in something close to loadData instead? For example, all the data fetching routines go through the same place that acts as a (or interacts with) Cache Manager. — raina77ow
– raina77ow, Commented Jan 15, 2018 at 16:44
yes of course that would be better then, but this is kind of also part of my question. If any solution exists to only make api calls if necessary, which would be kind of similar to your cache manager — Berni
– Berni, Commented Jan 15, 2018 at 16:58

Philip Feldmann · Accepted Answer · 2018-01-16 08:33:00Z

2

The following should work according to some clues from the vue and vue-router documentations:

Wrap your router-view inside a keep-alive element
Fetch the API inside the mounted hook of your component:

mounted () { this.data = loadData() }

In theory, this should only mount the component once and keep its state alive, even when the router is switching components inside the router-view.

Note that this is not the preferred way which vuejs or the vue-router itself suggest. Vue suggest using external state management like vuex.

answered Jan 16, 2018 at 8:33

Philip Feldmann

8,5037 gold badges47 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

Vue-Router Data Fetching only once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related