具有分页无限滚动的Vuexfire bindFirebaseRef

Question

问题：如何在不重新查询之前检索（和绑定）的结果的情况下向绑定的 Firestore VuexFire 引用添加分页（无限滚动）？

背景： 我目前正在使用 VuexFire firestore 绑定来填充大多数被投票的帖子的时间线，作为一项操作，在我的 Vuex 商店中，如下所示：

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

这会将我的 firestore 数据库中评分最高的前 30 个帖子检索到我的 vuex 状态变量timelineResults。

要添加分页，我发现了一个非 VuexFire 示例，如下所示： How to paginate or infinite scroll by number of items in firestore?

var first = db.collection("....").orderBy("price", "desc").limitTo(20);

return first.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  console.log("last", lastVisible);

  // Construct a new query starting at this document,
  // get the next 25 cities.
  var next = db.collection("....")
          .orderBy("price", "desc")
          .startAfter(lastVisible)
          .limit(20);
});

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

Answer 1

您可以创建一个更通用的操作，就像这样：

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),
});