I'm trying to set up vuexfire with firestore for a project, I think I've done everything according to the docs. I managed to get data from firestore inside a component using vuex/vuexfire and show it correctly in the UI but when inspecting the state in the devtools I get that my state hasn't changed.
I used the vue-cli to set up my project and followed the vuexfire docs and examples for a basic todo app.
Here's my store file:
import Vue from 'vue'
import Vuex from 'vuex'
import { vuexfireMutations, firestoreAction } from 'vuexfire'
import { db } from './db'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
todos: []
},
mutations: {
...vuexfireMutations
},
actions: {
bindTodos: firestoreAction(({ bindFirestoreRef }) => {
return bindFirestoreRef('todos', db.collection('todos'))
}),
unbindTodos: firestoreAction(({ unbindFirestoreRef }) => {
unbindFirestoreRef('todos')
})
}
})
And here's the basic component that loads and displays the ui:
<template>
<div>
<h1>Home</h1>
<p v-for="todo in todos" :key="todo.id">{{ todo.name }}</p>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'Home',
computed: { ...mapState(['todos']) },
methods: { ...mapActions(['bindTodos']) },
created: function () {
this.bindTodos()
}
}
</script>
As you can see the UI is showing the todos but state is not:
I've tried refreshing the state in the devtools but it isn't working. Any help will be much appreciated!
