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

Posted 2023-02-22

【中文标题】在 Vuejs 中使用 beforemount 进行数据渲染，每次打开该组件/页面时都会不断增加渲染的数据列表

【英文标题】：Data rendering with beforemount in Vuejs keep multiplying the list of data renderd every time I open that component/page

【发布时间】：2021-03-30 16:02:26

【问题描述】：

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

dataitems() 
      db.collection("Orders")
        .get()
        .then( (querySnapshot)=> 
          querySnapshot.forEach((doc)=> 
          //  console.log(doc.id, " => ", doc.data());
            var list= doc.data()
           this.$store.commit('firebaseList',list)
          );
        );
    ,

这是挂载生命周期钩子

  mounted()
    return this.dataitems()
  ,

我的 vuex 代码是这样的：

state()

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

【问题讨论】：

因为数据每次都会被持久化到 vuex 存储中，我认为

@NileshPatel 我能做些什么来解决它？

能解决吗？如果是，如何使用它，因为我试图将整个组件包装在其中，但是它不起作用。

在vuex突变，替换数据，不要这样追加state.list=list

@NileshPatel 我无法替换它，因为我正在制作该组件以供管理员添加项目。就像一个汉堡。所以，我必须推动。

【参考方案1】：

每次调用 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;
    ,

);

然后在mounted中加载你的数据：

  import mapGetters from 'vuex';

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

【讨论】：

Firebaselist 是数组，所以必须使用推送。我正在这样做“ firebaseList(state,items) state.FirebaseList.push(items) ,”

首先，mapGetters 应该使用计算的。您的代码没有呈现我发布的有问题的 firebase 函数。

首先。 mapGetters 不需要在计算中...我提供了上面的示例作为指导。所以你可以准确地看到你错过了什么。您似乎不知道如何在您的应用程序中应用 vuex。如果您要按照 vuex 模式正确执行此操作，您将在 vuex 操作中调用 firebase 以更新状态，然后侦听组件内的更新