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

问题描述

如果我想使用 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",

并将调度部分移到用户成功登录的地方。不在created的App.vue钩子中。我移动了它，因为 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 看起来很好！现在是由于缺少数据而引发错误的统计信息。这怎么解释？

解决方法

您的查询将 where 子句与 array-contains 和 orderBy 子句组合在一起，您需要创建索引。