Store / API / Optimisation

Hello friends coder,

understanding the basics of VueX, I had a technical question.

I’m currently setting up my store, which will centralize some information that I retrieve via my API.

The goal is to request my API only once, as soon as my site is launched, and then I will come and retrieve the necessary information in each component.

Currently, my components will call the mutations / actions with their created method.

But if I change page (so component), these requests are made again, which is clearly not optimized.

Would you have a solution to make these requests only once ?

Thanks to you !

If I’ve understood correctly then it sounds like all of your components (or at least the main component for each page) has the same logic duplicated in its created hook?

If so, then why not just move the logic out of the created hook? If you always make the same calls when the page loads then make the calls in your main.js or the equivalent entry point file. Or, if you’d prefer to keep it within a component, do it in whatever root component is at the top of your application (the wrapper component that doesn’t change when the user changes between pages).

I’d also expect that it’d be better to handle the loading state in one place, outside the individual page components. Don’t even create those components until the data is loaded, so they never have to worry about missing data.