Bonjour,

Je fais ma première application avec Vue. J'utilise Vue Router et Vuex, parce que bon, tant qu'à m'initier à un nouvel environnement...L'application a une structure extrêmement classique : un accueil avec une liste de liens vers des articles, et quand on clique sur un lien : une page contenant l'article. Mon souci, c'est quand je retourne vers l'accueil depuis un article, et que je change d'article, l'article précédent est encore visible pendant une demi-seconde avant que le nouveau apparaisse. Et ça, je ne veux pas !

Comme souvent en programmation, il y a un tas de manières différentes de réaliser ça. Mais je cherche la plus agréable pour l'utilisateur, et la plus efficace niveau temps de chargement.

Est-ce que c'est au niveau du routeur que je dois agir ? Ou du Vuex Store ? Ou l'événement mounted() ? Ou created() ? Ou destroy() en quittant l'article précédent ?

Bref je m'embrouille dans toutes ces possibilités !

Actuellement :

computed: {
    ...mapGetters({
      article: 'ARTICLE',
      user: 'USER',
      reviews: 'REVIEWS'
    }),
},
[...]
watch: {
    rating: function() {
      if (this.rating) {
        this.$store.dispatch('GET_CONFIRMED_REVIEWS', this.$route.params.id);
      } 
    }
  },
  mounted() {
    this.$store.dispatch('GET_ARTICLE', this.$route.params.id)
      .then(success => {
        this.rating = this.article.rating;
      });    
  },

NB: l'histoire de this.rating ne sert qu'à contrôler si ça vaut le coup d'aller chercher les commentaires de l'article.

A quel moment suis-je censé aller chercher les données pour que l'utilisateur n'ait pas à voir les anciennes données avant de voir les nouvelles ?

Merci.

https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation

https://stackoverflow.com/questions/46890816/vuejs-component-created-wait-for-data-to-load-first

-
Edité par EisaHadaran 16 janvier 2021 à 6:25:24