如何从VueFire查询中获取最后一个文档

Question

对解决这个问题感到沮丧，因为我不是JS专家。

我使用Firestore作为数据库，使用VuexFire将数据绑定到VueX状态，如下所示。

​

 getLeads: firestoreAction(async ({
        bindFirestoreRef
    }) => {
        // return the promise returned by `bindFirestoreRef`
        return bindFirestoreRef('leads', db.collection('leads').orderBy('updated.date', 'desc').limit(30))
    }),

它得到前30个结果，然后我想实现一个无限滚动功能，在每次滚动到达底部时运行一个函数，并获取更多数据并绑定到相同的状态。在Firestore中，分页需要传递最后获取的文档的查询游标作为引用

​

下面来自firebase文档，使用vanilla JS

​

var first = db.collection("cities")
        .orderBy("population")
        .limit(25);

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("cities")
          .orderBy("population")
          .startAfter(lastVisible)
          .limit(25);
});

因为我使用VuexFire将数据绑定到状态，所以我没有看到一个选项来获取由VuexFire获取的最后一个文档的快照(来自上面代码的lastVisible)，以便将其传递给下一个查询。

​

任何帮助都将受到高度的感谢。

Answer 1

假设我有一个客户记录的集合，并且我显示了最后更新的前5个记录。

查询为

getLeads: firestoreAction(({ commit, bindFirestoreRef
}) => {
    bindFirestoreRef('Leads', db.collection('leads')
   .orderBy('updated.date', 'desc').limit(5)).then(documents => {
        commit('POPULATE_TESTLEADS', documents);
        commit('LAST_DOC', documents[documents.length - 1]);
    });

}),

我将结果和lastdoc保存在状态中，循环并显示名称，如下所示：

Nakheel
Emaar Group
Yapi Kredi Inc
Cairo Amman Bank
Arab Jordan Investment Bank LLC

然后，我再次调用最后一个文档作为查询游标，并期望接下来的5个文档从firebase返回，如下所示

moreLeadLeads: firestoreAction(({ state, bindFirestoreRef
}) => {
    bindFirestoreRef('testLeads', db.collection('leads')
    .orderBy('updated.date', 'desc')
   .startAfter(state.lastDoc).limit(5))
}),

但是我从firestore得到了与上面相同的5个结果。我做错了什么？

Answer 2

在内部，VueFire和VuexFire使用一个serializer函数，该函数将RTDB或Firestore返回的每个文档映射到绑定到最终组件或Vuex store状态的数据对象。

默认的serializer由createSnapshot函数实现，它是vuefire-core库的一部分：

/**
 * @param {firebase.firestore.DocumentSnapshot} doc
 * @return {DocumentData}
 */
export function createSnapshot (doc) {
  // defaults everything to false, so no need to set
  return Object.defineProperty(doc.data(), 'id', {
    value: doc.id
  })
}

如您所见，它只返回doc.data() (添加了id )并丢弃doc对象。但是，在通过query.startAfter(doc)实现Firestore分页时，我们需要原始的doc对象。好消息是，VueFire和VuexFire API允许我们用自己的API替换serializer，从而可以像这样保留文档对象：

const serialize = (doc: firestore.DocumentSnapshot) => {
  const data = doc.data();
  Object.defineProperty(data, 'id', { value: doc.id });
  Object.defineProperty(data, '_doc', { value: doc });
  return data;
}

我们可以通过plugin options全局配置新的VuexFire序列化程序，也可以通过binding options配置每个绑定。

//全局定义序列化(firestorePlugin，{Vue.use })；

// OR每个绑定序列化(‘todos’，db.ref('todos')，{bindFirebaseRef})

对于VuexFire，我们现在可以以state.todos[0]._doc或last document state.todos[state.todos.length-1]._doc的形式访问第一个文档，并使用它们实现集合的分页查询，或者绑定单个文档的"get next“和"get previous”查询(当您的基本查询具有多字段排序时，这是必不可少的)。

注意:因为_doc和id是不可枚举的属性，所以它们不会出现在Vue DevTools中的组件或存储对象上。

Answer 3

从关于binding data and using it的VueFire文档中，$bind方法(我假设您的bindFirestoreRef包装了它)返回一个带有结果的承诺(以及将其绑定到this)。从该文档中：

绑定this.$

(‘documents’，documents.where('creator'，'=='，this.id)).then(documents => { // documents将指向data: // this.documents === documents}中声明的相同属性)

因此，您应该能够执行相同的操作，然后从数组中获取文档，如下所示：

bindFirestoreRef('leads', db.collection('leads').orderBy('updated.date', 'desc').limit(30)).then(documents => {
  this.lastDoc = documents[documents.length - 1];
})