If I want to query documents from a Firestore with Vuexfire. I can successfully do this by doing the following:
I can bind the docs using this action:
bindEntries: firestoreAction(({ bindFirestoreRef }) => {
var query = db
.collection("entries")
.orderBy("date");
return bindFirestoreRef("entries", query);
}),
that I dispatch in my App.vue like this:
created() {
this.$store.dispatch("bindEntries");
},
To actually get the data in my component, I use this getter
entries(state) {
return state.entries;
},
that I call in a computed property:
computed: {
entries() {
return this.$store.getters.entries;
},
}
So far, so good.
Now I want to adjust my code to not query all the data from the Firestore, but filtered for the currently logged in user. I adapted the firestoreAction to
bindEntries: firestoreAction(({ bindFirestoreRef }, uid) => {
var query = db
.collection("entries")
.where("editors", "array-contains", uid)
.orderBy("date");
return bindFirestoreRef("entries", query);
}),
and moved the dispatching part to the point where the user successfully logged in. It is not in the created hook of the App.vue. I moved it, because the user id is unknown in the created hook. I call it like so:
auth
.signInWithEmailAndPassword(this.email, this.password)
.then((data) => {
this.$store.dispatch("bindEntries", data.user.uid);
}
I'm not geeting any errors, but nothing is displayed. What am I doing wrong?
I uploaded the whole code, in case I forgot to mention something: https://github.com/juliangermek/haushaltsbuch
Thanks a lot!
Edit: I just found out that in another component (in Stats.vue > MonthOverview.vue > OverallSums.vue) everything looks fine!
The only difference I can see is that I redirect directly to Entries.vue (the page I'm having problems with) and switch to the stats afterwards as a user. I just switched this in my router and my Entries.vue looks just fine! Now it is the stats that throws an error due to missing data. How could this be explained?
