Vuexfire bindFirebaseRef с пагинацией бесконечной прокрутки - PullRequest
Новая
       90

Vuexfire bindFirebaseRef с пагинацией бесконечной прокрутки

0 голосов
/ 19 ноября 2018

Вопрос : Как добавить нумерацию страниц (бесконечную прокрутку) в мою привязанную ссылку Firestore VuexFire без повторного запроса ранее полученных (и связанных) результатов?

Фон : В настоящее время я использую привязку пожарного магазина VuexFire, чтобы заполнить временную шкалу для большинства постов с голосованием, как действие, в моем магазине Vuex, например: 

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

Это позволит получить 30 лучших записей в моей базе данных firestore в мою переменную состояния 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);
});

Есть ли способ объединить два примера и добавить результаты в привязанную ссылку?

1 Ответ

0 голосов
/ 30 июля 2019

Вы можете создать более общее действие, например: 

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