时间戳

首页 > 解决方案 > 显示每次导航到组件的重复值

vue.js - 显示每次导航到组件的重复值

问题描述

我正在从 firebase 获取数据并将它们存储在 Vuex 状态。我在字符组件中使用 v-for 以列表格式显示它们。当页面第一次加载时，字符列表显示完美，但是当我导航到其他页面并再次返回字符时，列表显示重复值。

<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="" />
            </div>
            <div class="hero-title">
              <h3>{{ allHero.name }}</h3>
            </div>
          </router-link>
        </li>
      </ul>

computed: {
    ...mapGetters([
      "getAllHeros"
    ]),
}
methods: {
  ...mapActions(["fetchAllHeros"])
},
created() {
  this.fetchAllHeros();
}

const state = {
    allHeros: [],
}

const getters = {
    getAllHeros: (state) => {
        return state.allHeros
    },
}

const actions = {
    fetchAllHeros: ({commit}) => {
        database.collection('heros').get()
        .then(snapshot => {
            snapshot.forEach(doc => {
                let heros = doc.data();
                heros.id = doc.id
                //console.log(heros);
                commit('setAllHeros', heros)
            })
        })
    }
}

const mutations = { 
    setAllHeros: (state, payload) => {
        state.allHeros.push(payload);
    }
}

标签： vue.jsvuex

解决方案

执行检查以查看是否allHeros存在。

你可以把它放进去，created()甚至放在fetchAllHeros. 如果你把它放在动作中，那么一定要getters和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()
  ...
}

推荐阅读