与Vuexfire绑定并通过计算的属性显示分页结果

问题描述

我现在已经在Vuexfire中广泛使用Firestore，并且正在尝试实现分页以一次显示一组查询结果。它大部分都在工作，但正在尝试解决一个问题。我有一个“事件”集合，我一次绑定了7个项目。如果传入doc参数，则将下7个绑定到“事件”存储变量。

    bindEvents: firestoreAction(({ bindFirestoreRef },doc) => {
      if (doc) return bindFirestoreRef('events',Firebase.firestore().collection('events').limit(7).startAfter(doc),{ serialize })
        return bindFirestoreRef('events',Firebase.firestore().collection('events').limit(7),{ serialize 
       })
    })

在调用代码中，在调用bindEvents之后（在bindEvents的then子句中），我立即提交到另一个存储变量“ savedList”，该变量是使用以下突变的7个项目绑定块的主列表：>

    SAVE_QUERIED_EVENTS (state) {
      state.savedList.push(...state.events)
      const set = new Set(state.savedList)
      state.savedList = [...set]
    }

我正在使用计算属性'filteredEvents'来显示saveList，如下所示。我只是返回返回saveList（getSavedList映射到获取state.savedList的vuex存储getter）

    filteredEvents () {
      console.log('Items:',this.getSavedList)
      return this.getSavedList
    }

实际问题是这样的：

可以说我绑定了前7个项目并将其保存到主列表中。过滤事件返回7个项目，并且显示正确更新为显示7个项目。
然后，我通过单击“加载更多”按钮加载更多项目。这将使用lastVisible文档再次调用bindEvents，并将这些项目附加到主列表中。现在，getSavedList返回14个项目，显示也会相应更新（显示所有14个项目）。
现在，我导航至应用程序中的其他页面。
我导航回到事件页面。印刷品确认filteredEvents返回了14个项目。但是，显示屏现在仅显示第二组，共7个项目。

为什么我要遍历显示事件的计算属性根据打印返回14个项目，为什么第二组项目只能显示事件？？

感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-cloud-firestore javascript vue.js vuexfire