Javascript 在Vuejs中使用beforemount进行数据呈现每次打开该组件/页面时，都会使数据呈现列表不断增加

我正在以一种方法从Firestore中提取数据，并将其传递到mount/beforemount以在屏幕上显示。但是，每当我重新打开页面（导航到另一个页面并返回）时，它会一次又一次地呈现相同的列表（例如，2个项目变为4和6，依此类推）

这是挂载生命周期挂钩

  mounted(){
    return this.dataitems()
  },

我的vuex代码如下：

state()
{
return{
FirebaseList=[],
}},
mutations:{
firebaseList(state,items){
   state.FirebaseList.replace(items)
  },
getters:{
getFirebaseList(state){
      return state.FirebaseList
    }
}

---

每次调用dataItems（）时，您都会来到Vuex存储区。这可以通过简单地更改为提交替换firebaseList中所有项的操作或突变来解决。然后，要加载数据，您需要在存储中创建一个Getter，然后返回firebaseList

像这个例子：

export default new Vuex.Store({
state: initialState(),
mutations: {
    updateList(state, payload) {
        state.firebaseList = payload;
    }
},
getters: {
    getFirebaseList(state) {
        return state.firebaseList;
    },
}
});

然后，要将您的数据加载到已装载的：

  import {mapGetters} from 'vuex';

    mounted(){
      this.firebaseList = this.getFirebaseList;
    },
    methods: {
        ...mapGetters(["getFirebaseList"]),
    }

---

因为每次数据都会持久化到vuex存储区，所以我think@NileshPatel我能做些什么来解决它？能解决它吗？如果是，如何使用它，因为我试图将整个组件包装在其中，但它不起作用。在vuex中，替换数据，不要像这样附加它

状态。list=list

@NileshPatel我无法替换它，因为我正在为管理员添加项目制作该组件。像个汉堡。所以，我必须推送。Firebaselist是数组，所以必须使用推送。我是这样做的“firebaseList（state，items）{state.firebaseList.push（items）}”，首先，MapGetter应该使用computed。您的代码没有呈现我发布的有问题的firebase函数。首先。MapGetter不需要在计算中。。。我提供了上面的例子作为指导。这样你就能准确地看到你错过了什么。您似乎不知道如何在应用程序中应用vuex。如果要按照vuex模式正确执行此操作，则可以在vuex操作中调用firebase来更新状态，然后侦听组件中的更新

  import {mapGetters} from 'vuex';

    mounted(){
      this.firebaseList = this.getFirebaseList;
    },
    methods: {
        ...mapGetters(["getFirebaseList"]),
    }