带分页无限卷轴的Vuexfire bindFirebaseRef

Question

问题：如何在不重新查询以前检索(并绑定的)结果的情况下，将分页(无限滚动)添加到绑定的VuexFire引用中？

后台：我目前正在使用VuexFire防火墙绑定来填充大多数经过表决的帖子的时间线，作为一种操作，在我的Vuex商店中这样做：

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

这将检索我的消防站数据库中排名最高的30个帖子到我的vuex状态变量timelineResults。

为了添加分页，我找到了一个非VuexFire示例，如：如何分页或无限滚动在消防局中的项目数？

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

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

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