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

Question

我正在使用 Vue.js、Vuex 和 Firebase 构建一个简单的 Vue.js 待办事项列表应用程序。 Vuex 商店按原样分派、提交和返回输入的数据，但我希望能够将应用程序连接到 Firestore 数据库。到目前为止，我已经设法设置了应用程序，以便将数据推送到集合中，但我还希望数据库将 firestore 数据的快照返回到 DOM，并允许从数据库中删除数据。我在简单的非 Vuex 项目中使用过这些 Firestore 方法，但不确定如何将 Firestore 方法与 Vuex 商店合成。我怎样才能做到这一点？这是我到目前为止所拥有的。非常感谢！

<!--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

您可以在您的突变中进行同步，请参见下面的示例： 来源：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: ''
    }
  },