I have been integrating vuex as a middleware between firestore and my vue application. The structure of my vuex store is as follows:
const store = new Vuex.Store({
state: {
posts: [],
},
mutations: {
add_post(state, post) {
state.posts[post.id] = post;
},
},
actions: {
async load_post(context, id) {
let post = await db
.collection('posts')
.where('post_id', '==', id)
.get();
post = post.docs[0];
post = {id, ...post.data()};
context.commit('add_post', post);
},
}
});
Within my Vue component:
export default {
name: 'Post',
beforeMount() {
const id = this.$route.params.id;
this.$store.dispatch('load_post', id);
},
data() {
return {
id: this.$route.params.id
};
},
computed: {
content() {
return this.$store.state.posts[this.id];
}
}
};
When browsing the site, everything runs smoothly. However, if I refresh the page, the content property becomes undefined. After investigating, I believe it's trying to access the store while it's still loading (hence being undefined), and then failing to update when the store is ready. I've experimented with watchers and vuex's mapState but haven't found a solution yet... any ideas?