Vue.js 带有分页无限滚动的Vuexfire bindFirebaseRef

问题：如何向绑定的Firestore引用添加分页（无限滚动），而不重新查询以前检索（和绑定）的结果

背景： 我目前正在使用VuexFire firestore绑定为我的Vuex应用商店中的大多数经过投票的帖子填写时间线，具体如下：

  fillTimeLine: firebaseAction(
    ({ bindFirebaseRef }) => {
      bindFirebaseRef(
        'timelineResults',
        db
          .collection('POSTS')
          .orderBy('combined_vote_score', 'desc')
          .limit(30)
      )
    })

bindRef: firestoreAction(({ bindFirestoreRef }, { name, ref }) => {
  bindFirestoreRef(name, ref);
}),

这将检索firestore数据库中排名前30位的最高分帖子到vuex状态变量timelineResults

要添加分页，我发现了一个非VuexFire示例，如下所示：

---

有没有办法将这两个示例结合起来并将结果附加到绑定的引用中？

您可以创建一个更通用的操作，如下所示：

  fillTimeLine: firebaseAction(
    ({ bindFirebaseRef }) => {
      bindFirebaseRef(
        'timelineResults',
        db
          .collection('POSTS')
          .orderBy('combined_vote_score', 'desc')
          .limit(30)
      )
    })

bindRef: firestoreAction(({ bindFirestoreRef }, { name, ref }) => {
  bindFirestoreRef(name, ref);
}),

然后像这样使用它：

this.bindRef({
  name: 'timelineResults',
  ref: db
    .collection('POSTS')
    .orderBy('combined_vote_score', 'desc')
    .limit(30),
});

在那里，您可以根据需要更改ref。在这种情况下，当检测到滚动限制时：

// lastVisible: using the array position from the previous binding
// since with vuex's bound data you cannot get the snapshots
this.bindRef({
  name: 'timelineResults',
  ref: db
    .collection('POSTS')
    .orderBy('combined_vote_score', 'desc')
    .startAfter(lastVisible)
    .limit(20),
});

---

您实现了吗？您愿意看看另一个Vuexfire问题吗？