Vuejs, surconsommation d'API et préconsommation

jerome D
Javascript

Bonjour,

je suis débutant sur vuejs, sur une des pages de mon application, j'ai créé 4 "onglets", chacun ayant une route.
Concrétement, j'ai une page Salarié, composé de 4 onglets Dossier, Salaires, Statistiques, Appréciations.
Chaque onglet à sa propre route et consomme une API différente ou du moins des méthodes différentes de mon API.

Mon problème est une surconsommation de cette API et une volonté d'optimisé les temps de chargement.

En clair, lorsque je charge mon onglet Dossier, je consomme l'api correspondante, si je clique sur l'onglet Salaires, je consomme une seconde API, si je reviens sur l'onglet Dossier, je reconsomme la première API alors que les informations sont strictement identique.

De façon optimale, je souhaiterai:

  • Consommer mon API "Dossier" à la consultation du dossier
  • Les données résultantes de la consommation de l'API "Dossier" reste "en mémoire" , malgré la consultation des autres "onglets" afin de pouvoir être reprise si je reviens sur cet onglet, sans re faire un appel à l'API.
  • je "pré-consomme", pendant la consultation de l'onglet dossier, les autres API afin d'accélérer le chargement.

Pourriez vous me guider?
Merci par avance

3 réponses

Azorgh
Réponse acceptée

Hello,

Tu peux utiliser keep-alive, pour garder tes composants chargés. Ca évite d'utiliser un store VueX. Keep-alive permet de garder en cache tes composants, avec les données qui lui sont propres.
Si tu ajouter un keep-alive au niveau de ton routeur, l'application aura exactement le comportement souhaité excepté la partie sur le chargement des autres données pendant que tu consulte l'onglet des dossiers. D'ailleurs, je ne suis pas certain que ça ait une grande importance. Dans le cas où tu viens juste consulter les dossiers, pourquoi charger toutes les autres parties ?

Je pense clairement que la solution du keep-alive est la meilleure dans ton cas : https://fr.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-avec-les-composants-dynamiques

jerome D
Auteur
Réponse acceptée

Merci pour ta réponse.
Je suis entrain de terminer le dev via vuex et la comportement est pratiquement parfait.
Je charge dossier sur la vue dossier depuis created() si le guetter dossier renvoie vide, sinon j'utilise le guetter.
En mounted(), asynchrone, je charge mon onglet salaire. C'est transparent pour l'utilsiateur qui n'a aucun temps de chargement.
Je clean tout mes states depuis la page de selection des salariés.

Je vais quand même regarder keep-alive au cas ou

jerome D
Auteur

Après recherche et test, l'utilisation de vuex permet de n'appeler l'API qu'une seule fois.
Il reste juste a trouver comment pré-charger les autre pages et ce sera génial :D