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

时间:2018-11-10 22:03:17

标签: firebase vue.js google-cloud-firestore vuex nuxt

我使用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 个答案:

答案 0 :(得分:0)

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

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