Éviter le contenu re-fetching lorsque l'Etat a déjà peuplé

Question

je la structure des composants Vue suivante:

Wrapper 
-- QuestionsList 
---- Question 
-- QuestionDetail 

Et les routes suivantes:

/ (goes to Questionslist) 
/:id (goes to QuestionDetail) 

Lorsque l'utilisateur visite /, une requête HTTP GET est fait (via Vuex) et le contenu est rempli dans un tableau d'objets. Puis, s'il clique sur un lien "show more", il voit la page QuestionDetail (mais sans avoir à réexporter le contenu - elle est prise directement à partir du State)

Mon problème est que chaque fois que nous "route" dans une page, nous ne sommes pas au courant de l'état de notre magasin.

Par exemple, lorsque l'utilisateur navigue (profondément lié) à /:id, nous devons voir si l'État est peuplé et donc éviter de faire une nouvelle HTTP GET:

created() { 
    if (!this.$store.state.questions.length) { 
    this.$store.dispatch('requestItems'); 
    } 
}, 
computed: { 
    question() { 
    return this.$store.state.questions[this.$route.params.id] || {}; 
    }, 
}, 

Sur un scénario différent, étant donné que J'ai toujours concat les nouveaux éléments récupérés avec l'état actuel, je vois souvent que les données sont dupliquées:

[types.FETCHED_ADS_SUCCESS](state, payload) { 
    state.items = [...state.items, ...payload]; // when I go back in history, a new action is initiated and concats a copy of the same data 
    }, 

Answer 1

Quelle est la structure de votre magasin? J'ai trouvé utile de garder un indicateur booléen dans le magasin pour indiquer si le contenu est chargé ou non. Puis, dans le composant où vous récupérez les questions, recherchez-les et mettez-les à jour une fois chargées.