Question

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

背景：我目前正在使用VuexFire Firestore绑定为我的Vuex存储中的大多数更新帖子填充时间线，例如：

int TelegramApiId = 123456;
string TelegramApiHash = "abcdef";
TelegramClient TLClient = null;

async void SendMessage ( )
{
    var store = new FileSessionStore ( );
    this.TLClient = new TelegramClient ( this.TelegramApiId, this.TelegramApiHash, store );
    await this.TLClient.ConnectAsync ( );
}

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

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

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

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

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 binded 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具有分页无限滚动

1 个答案: