Firestore，vue，vuex，vuexfire:如何使getter实际上从存储中获取数据？

Question

如果我想用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);
}),

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

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看起来很好！现在，由于缺少数据而引发错误的是统计数据。这怎么解释呢？

Answer 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