Firestore、vue、vuex、vuexfire：如何让 getter 真正从存储中获取数据？

Posted 2023-02-22

【中文标题】Firestore、vue、vuex、vuexfire：如何让 getter 真正从存储中获取数据？

【英文标题】：Firestore, vue, vuex, vuexfire: How to make getter actually get data from store?

【发布时间】：2021-07-02 15:57:12

【问题描述】：

如果我想使用 Vuexfire 从 Firestore 中查询文档。我可以通过执行以下操作成功地做到这一点：

我可以使用此操作绑定文档：

bindEntries: firestoreAction(( bindFirestoreRef ) => 
  var query = db
    .collection("entries")
    .orderBy("date");
  return bindFirestoreRef("entries", query);
),

我像这样在我的 App.vue 中调度：

created() 
  this.$store.dispatch("bindEntries");
,

为了真正获取组件中的数据，我使用了这个 getter

entries(state) 
  return state.entries;
,

我在计算属性中调用：

computed: 
  entries() 
    return this.$store.getters.entries;
  ,

到目前为止，一切都很好。

现在我想调整我的代码，使其不查询 Firestore 中的所有数据，而是针对当前登录的用户进行过滤。我将firestoreAction 改编为

bindEntries: firestoreAction(( bindFirestoreRef , uid) => 
  var query = db
    .collection("entries")
    .where("editors", "array-contains", uid)
    .orderBy("date");
  return bindFirestoreRef("entries", query);
),

并将调度部分移动到用户成功登录的位置。不在App.vue的created钩子中。我移动了它，因为 created 挂钩中的用户 ID 是未知的。我这样称呼它：

auth
  .signInWithEmailAndPassword(this.email, this.password)
  .then((data) => 
    this.$store.dispatch("bindEntries", data.user.uid);
  

我没有收到任何错误，但没有显示任何内容。我做错了什么？

我上传了整个代码，以防忘记提及：https://github.com/juliangermek/haushaltsbuch

非常感谢！

---

编辑： 我刚刚发现在另一个组件中（在 Stats.vue > MonthOverview.vue >OverallSums.vue 中）一切看起来都很好！

我能看到的唯一区别是我直接重定向到 Entries.vue（我遇到问题的页面），然后以用户身份切换到统计信息。我刚刚在我的路由器中切换了它，我的 Entries.vue 看起来还不错！现在是由于缺少数据而引发错误的统计信息。这怎么解释？

【问题讨论】：

您看到任何错误吗？您有与您的查询相对应的索引吗？

我的索引有错误，但创建了它，现在没有出现错误。

【参考方案1】：

您的查询结合了where 子句与array-contains 和orderBy 子句，您需要创建一个索引。

文档中的更多详细信息：

https://firebase.google.com/docs/firestore/query-data/order-limit-data https://firebase.google.com/docs/firestore/query-data/queries#in_not-in_and_array-contains-any https://firebase.google.com/docs/firestore/query-data/indexing

【讨论】：

感谢您的回答！我实际上得到了索引错误消息并且已经创建了一个索引（使用错误消息中的链接）。这似乎不是问题...