如果我想使用 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
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 看起来还不错!现在是由于缺少数据而引发错误的统计信息。这怎么解释?