Vuexfire bindFirebaseRef(페이지 지정 무한 스크롤 포함)

Vuexfire bindFirebaseRef(페이지 지정 무한 스크롤 포함)

질문:이전에 검색된(및 바인딩된) 결과를 다시 쿼리하지 않고 바인딩된 Firestore VuexFire 참조에 페이지 번호 지정(무한 스크롤)을 추가하는 방법은 무엇입니까?

배경:현재 VuexFire Firestore 바인딩을 사용하여 Vuex 스토어에서 대부분의 업보트 타임라인을 다음과 같이 채우고 있습니다.

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

그러면 Firestore 데이터베이스에서 등급이 가장 높은 상위 30개의 게시물이 vuex 상태 변수 timelineResults로 검색됩니다.

페이지를 추가하기 위해 다음과 같은 비 Vuex Fire 예를 찾았습니다.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);
});

두 예를 결합하여 바인딩된 참조에 결과를 추가하는 방법이 있습니까?

다음과 같이 보다 일반적인 액션을 작성할 수 있습니다.

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 bound data you cannot get the snapshots
this.bindRef({
  name: 'timelineResults',
  ref: db
    .collection('POSTS')
    .orderBy('combined_vote_score', 'desc')
    .startAfter(lastVisible)
    .limit(20),
});

언급URL : https://stackoverflow.com/questions/53367835/vuexfire-bindfirebaseref-with-pagination-infinite-scroll