경로가 변경될 때마다 Vuex Getters 중복 키

경로가 변경될 때마다 Vuex Getters 중복 키

FireBase에서 객체 배열을 가져와 V-for를 사용하여 문자 구성 요소를 목록 형식으로 표시합니다.홈페이지에 접속하여 캐릭터 페이지로 돌아갈 때마다 목록이 증가하여 중복된 키가 나타납니다.

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 모듈 -

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);
  }
};

새 페이지로 라우팅할 때 Vuex 저장소가 반드시 초기 상태로 재설정되는 것은 아닙니다.따라서 해당 컴포넌트가 생성될 때마다 vuex 저장소에 더 많은 히어로가 추가되어 중복된 히어로가 추가됩니다.

이를 방지하려면 간단한 논리를 사용하여 영웅이 로드되었는지 확인할 수 있습니다.

created() {
   if(this.getAllHeros.length == 0){
      //Get heros from database..
   };
}

언급URL : https://stackoverflow.com/questions/58861384/duplicate-keys-vuex-getters-every-time-route-changes