[Vuejs]-Duplicate values showing everytime navigating to component

1👍

Perform a check to see if allHeros exists or not.

You could put this in created() or even in fetchAllHeros. if you put it in the action, then be sure to pass in getters along with commit.

created() {
  if (this.getAllHeros.length < 1) {
    this.fetchAllHeros();
  }
}
fetchAllHeros: ({commit, getters}) => {
  if (getters.getAllHeros.length > 0) {
   return;
  }

  // Keep the code you already have
  database.collection('heros').get()
  ...
}

0👍

i too wasted much time figuring out this, finally i did like this,

  • i had feed section,a list of posts
    • on vuex state i maintained
    feed:[],feedInitialLoad:false,
  • once feed is first time loaded i mutate the feedInitialLoad:true, then
    then if i every time i visit the same route i would simply check on created hook
computed:{...mapState(['feedInitialLoad'])},
created(){
 if(!this.feedInitialLoad){
  //first time visit
   this.loadFeed();
   //mutate the feedInitialLoad to true 
 }  
}

Leave a comment