Question

由于我不是JS专家，因此沮丧地解决了这个问题。 ?

我正在使用Firestore作为数据库，并使用VuexFire将数据绑定到VueX状态，

string foo = "[[demo.waka=340]]";
string a = foo.Substring(foo.LastIndexOf('=') + 1);
string b = a.Substring(0, 1);
int outputNumber = Convert.ToInt32(b);

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

从firebase文档开始，使用香草JS

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

由于我使用VuexFire将数据绑定到状态，因此我看不到一个选项来获取VuexFire提取的最后一个文档的快照（上述代码中的lastVisible），以便将其传递给下一个查询。

任何帮助将不胜感激。 ??

Answer 1

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

默认serializer由功能createSnapshot实现，该功能是vuefire核心库的一部分：

/**
 * @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允许我们用自己的serializer来替换doc对象，这样可以保留doc对象，如下所示：

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进行每个绑定的配置。

//全局定义 Vue.use（firestorePlugin，{serialize}）;

//或每个绑定 bindFirebaseRef（'todos'，db.ref（'todos'），{序列化}）

对于VuexFire，我们现在可以访问第一个文档为state.todos[0]._doc或最后一个文档state.todos[state.todos.length-1]._doc，并使用它们来实现对集合的分页查询或“获取下一个”和“获取上一个”查询绑定单个文档（在基本查询具有多字段排序时必不可少）。

注意：由于_doc和id是不可枚举的属性，因此它们不会出现在组件上或将对象存储在Vue DevTools中。

Answer 2

让我们说我有一个客户记录集合，并且我显示的是前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 3

根据binding data and using it上的VueFire文档，$bind方法（我假设您的bindFirestoreRef包装）返回了一个带有结果的promise（并将其绑定到{{1} }。从该文档中：

this

因此，您应该能够执行相同的操作，然后使用类似以下内容的方法从数组中获取文档：

this.$bind('documents', documents.where('creator', '==', this.id)).then(documents => {
  // documents will point to the same property declared in data:
  // this.documents === documents
})

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

3 个答案: