如何将Firebase添加到Vuex待办事项列表应用程序？

Question

I am building a simple Vue.js todo list app using Vue.js, Vuex, and Firebase. The Vuex store dispatches, commits, and returns the inputted data just as it should, but I want to be able to connect the app to a Firestore database. So far, I have managed to set up the app so that data is pushed into the collection, but I also want the database to return a snapshot of the firestore data to the DOM, as well as to enable deleting of data from database. I have experience with these Firestore methods in simple non Vuex-projects, but am not sure how to synthesize Firestore methods with a Vuex store. How can I do this? Here is what I have so far. Thanks so much!

<!--GetTodo.vue-->

<template>
  <div id="get-todo" class="container">
      <input class="form-control" :value="newTodo" @change="getTodo" placeholder="I need to...">
      <button class="btn btn-primary" @click="addTodo">Add New Post</button>
      <ul class="list-group">
          <li class="list-group-item" v-for="todo in todos">
              {{todo.body}}
          <div class="btn-group">
              <button type="button" @click="remove(todo)" class="btn btn-default btn-sm">
              <span class="glyphicon glyphicon-remove-circle"></span> Remove
              </button>
          </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
 methods: {
   getTodo(e) {
     this.$store.dispatch('getTodo', e.target.value)
   },
   addTodo() {
     this.$store.dispatch('addTodo')
     this.$store.dispatch('clearTodo')
   },
   remove(todo){
     this.$store.dispatch('removeTodo', todo)
   }
 },
 computed: {
   todos(){
       return this.$store.getters.todos
   },
   newTodo() {
     return this.$store.getters.newTodo
   }
 }

}
</script>

<style>
</style>

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

import db from '../firebase';

export default new Vuex.Store({
  state: {
    todos: [],
    newTodo: ''
  },
  mutations: { //syncronous, committed
    GET_TODO(state, todo){
      state.newTodo = todo
    },
    ADD_TODO(state){
      state.todos.push({
        body: state.newTodo,
        completed: false
      })
      db.collection('messages').add({
        content: state.newTodo
      })
    },
    REMOVE_TODO(state, todo){
       var todos = state.todos
       todos.splice(todos.indexOf(todo), 1)
    },
    CLEAR_TODO(state){
      state.newTodo = ''
    }
  },
  actions: { //asyncronous, dispatched
    getTodo({commit}, todo){
      commit('GET_TODO', todo)
    },
    addTodo({commit}){
      commit('ADD_TODO')
    },
    removeTodo({commit}, todo){
      commit('REMOVE_TODO', todo)
    },
    clearTodo({commit}){
      commit('CLEAR_TODO')
    }
  },
  getters: {
    newTodo: state => state.newTodo,
    todos: state => state.todos.filter((todo) => {
      return !todo.completed
    })
  }
})

<!--App.vue-->
<template>
  <div id="app" class="container">
    <GetTodo></GetTodo>
  </div>
</template>
<script>
import GetTodo from './components/GetTodo.vue'
export default {
  components: {
    GetTodo
  }

}
</script>
<style>
body {
  font-family: Helvetica, sans-serif;
}
li {
  margin: 10px;
}
</style>

Answer 1

You can make sync in your mutation, see the example below: source: https://www.codewall.co.uk/how-to-create-a-real-time-to-do-list-app-with-vue-vuex-firebase-tutorial/

    import Vue from 'vue'
    import Vuex from 'vuex'
    import { db } from '@/main'

    Vue.use(Vuex)

    export default new Vuex.Store({
      state: {
        items: null
      },
      getters: {
        getItems: state => {
          return state.items
        }
      },
      mutations: {
        setItems: state => {
          let items = []

          db.collection('items').orderBy('created_at').onSnapshot((snapshot) => {
            items = []
            snapshot.forEach((doc) => {
              items.push({ id: doc.id, title: doc.data().title })
            })

            state.items = items
          })
        }
      },
      actions: {
        setItems: context => {
          context.commit('setItems')
        }
      }
    })


import { db } from '@/main'

export default {
  name: 'home',
  beforeCreate: function () {
    this.$store.dispatch('setItems')
  },
  data: function () {
    return {
      myTodo: '',
      errors: ''
    }
  },