Vuexfire bindFirebaseRef具有分页无限滚动 [英] Vuexfire bindFirebaseRef with pagination infinite scroll

问题描述

问题:如何向我绑定的Firestore中添加分页(无限滚动)

Question: How can I add pagination (infinite scroll) to my binded Firestore VuexFire reference without re-querying previously retrieved (and binded) results?

背景:我目前正在使用VuexFire Firestore绑定为我的Vuex存储中的大多数更新帖子(如动作)填充时间线，如下所示:

Background: I am currently using VuexFire firestore binding to fill a timeline for most upvoted posts, as an action, in my Vuex store like this:

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

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

This will retrieve the top 30 highest rated posts in my firestore database to my vuex state variable timelineResults.

要添加分页，我发现了一个非VuexFire的示例，如下所示:如何按数字分页或无限滚动仓库里有多少物品?

To add pagination I have found a non-VuexFire example like this: 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);
});

是否可以将两个示例结合起来并将结果附加到绑定的引用上?

Is there a way to combine the two examples and append results to a binded reference?

推荐答案

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

You could create a more generic action, just like this:

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

然后像这样使用它:

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

您可以根据需要更改参考.在这种情况下，当您检测到滚动限制时:

There you can change the ref according to your needs. In this case, when you detect the scroll limit:

// 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 bindFirebaseRef具有分页无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！