在 Google Firestore 中处理查询游标的正确方法？ (Vue/Nuxt.js)

Posted 2023-02-22

【中文标题】在 Google Firestore 中处理查询游标的正确方法？ (Vue/Nuxt.js)

【英文标题】：Proper way to handle Query Cursor in Google Firestore? (Vue/Nuxt.js)

【发布时间】：2019-04-14 02:15:24

【问题描述】：

我使用 Firebase Firestore 运行一个聊天应用程序，它运行得非常好，但是我遇到了以下问题：

为了对我的对话和聊天进行分页，我为我的听众使用 查询光标。我将这些查询游标保存到我的状态（vuex）中，以便稍后在需要时访问它们。这很有效，我可以为我的聊天消息和对话分页。

我像这样创建查询游标：

const query = await ref.get()
const cursor = query.docs[query.docs.length - 1]
commit('SET_CONVERSATIONS_QUERY_CURSOR', cursor)

稍后在下一个查询中使用它们，如下所示：

.startAfter(state.conversations.queryCursor)

实际上一切都很完美。

我现在的问题是，在我的状态下保存的光标似乎会定期更新（...为什么是 Firebase？），尤其是直接更新。这在使用 vuex 严格模式时给了我以下错误消息（-> 不允许直接访问状态）：

app.js:506 错误：[vuex] 不要在外部改变 vuex 存储状态 突变处理程序。

现在我当然想直接使用严格模式来避免突变状态，但是由于查询游标在我的状态，我不能。

我尝试在保存到存储之前克隆光标，但是浅克隆没有效果，深克隆因为Converting circular structure to JSON而不起作用。

所以...

关于如何存储查询游标以供以后使用，是否有推荐的方法？ 是否可以选择只存储文档的 ID，然后“重新创建”查询游标？

谢谢！

【参考方案1】：

您可以使用 Object.freeze(obj) 防止 javascript 对象被修改。

所以在你的情况下应该是const cursor = Object.freeze(query.docs[query.docs.length - 1])

【讨论】：

这很有帮助！谢谢。