Currently, I am in the process of setting up vuexfire with firestore for a project. Following the documentation provided, I believe I have correctly configured everything. Interestingly, I was able to fetch data from firestore within a component using vuex/vuexfire and display it accurately on the UI. However, upon inspecting the state in the devtools, I noticed that my state remained unchanged.
To initiate my project, I utilized the vue-cli and closely adhered to the vuexfire docs as well as examples for creating a basic todo application.
Below is an excerpt from 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')
})
}
})
Furthermore, here is the fundamental component responsible for loading and presenting the user interface:
<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>
Although the UI successfully displays the todos, unfortunately, the state seems unaffected:
I've attempted refreshing the state in the devtools without success. Any guidance or assistance would be greatly appreciated!