3

问题：如何在不重新查询之前检索（和绑定）的结果的情况下将分页（无限滚动）添加到绑定的 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 示例： 如何按 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);
});

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

4

1 回答 1

0

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

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),
});
于 2019-07-30T13:35:51.367 回答