Duplicate keys Vuex Getters every time route changes - vue.js

Question

I am getting an array of objects from firebase and showing them characters component in list format using V-for. Everytime I go to homepage and returning to characters page the list are getting multiplied and showing me duplicate keys.
characters.vue:
<template>
<ul class="characters-list">
<li v-for="allHero in getAllHeros" v-bind:key="allHero.id">
<router-link :to="{ name: 'characterDetail', params: { id: allHero.id } }">
<div class="hero-thumbnail">
<img :src="allHero.imageUrl" :alt="allHero.title" />
</div>
<div class="hero-detail">
<h3>{{ allHero.name }}</h3>
</div>
</router-link>
</li>
</ul>
</template>
import database from "#/firebase/init";
computed: {
...mapGetters({ getAllHeros: "getAllHeros" }),
},
created() {
database
.collection("heros")
.get()
.then(snapshot => {
snapshot.forEach(doc => {
let heros = doc.data();
heros.id = doc.id;
this.$store.dispatch('fetchAllHeros', heros)
});
});
}
VUEX Module -
const state = {
allHeros: []
};
const getters = {
getAllHeros: state => {
return state.allHeros;
}
};
const actions = {
async fetchAllHeros({ commit }, heros) {
commit("setAllHeros", heros);
}
};
const mutations = {
setAllHeros: (state, payload) => {
state.allHeros.push(payload);
}
};

Answer 1

When you route to a new page your Vuex store does not necessarily get reset to its initial state. Therefore every time that component is created you are adding more heros to the vuex store which is resulting in duplicate heros being added.
To prevent this, you can just use some simple logic to check if any heroes have been loaded:
created() {
if(this.getAllHeros.length == 0){
//Get heros from database..
};
}