vue.js - 具有分页无限滚动的 Vuexfire bindFirebaseRef

Question

问题:如何向绑定(bind)的 Firestore 添加分页(无限滚动)VuexFire引用而不重新查询以前检索(和绑定(bind))的结果？

背景:我目前正在使用 VuexFire firestore 绑定(bind)来填充大多数赞成的帖子的时间线，作为一个 Action ，在我的 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);
});

有没有办法结合这两个示例并将结果附加到绑定(bind)引用？

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