Vuex store example with Firestore real-time updates

store-users.js

import Vue from 'vue'
import { uid } from 'uid'

import { instance as axios } from 'boot/axios'
import { firestore as fs } from 'boot/firebase'

const BASEURL = process.env.API_BASEURL + '/users'

const state = {
   collection: {}
}

const mutations = {
   SET_USER: (state, value) => {
      Vue.set(state.collection, value.id, value)
   },

   DELETE_USER: (state, id) => {
      Vue.delete(state.collection, id)
   }
}

const getters = {}

const actions = {
   addUser: (context, data) => {
      try {
         axios.post(BASEURL, {
            id: uid(),
            ...data
         })
      } catch (err) {
         console.error('store-users/addUser', error)
      }
   },

   updateUser: (context, data) => {
      try {
         axios.put(BASEURL + '/' + data.id, {...data})
      } catch (err) {
         console.error('store-users/updateUser', error)
      }
   },

   deleteUser: (context, id) => {
      try {
         axios.delete(BASEURL + '/' + id)
      } catch (err) {
         console.error('store-users/deleteUser', error)
      }
   },

   bindUsers: ({ commit }) => {
      fs.collection('users').onSnapshot(snapshot => {
         snapshot.docChanges().forEach(change => {
            if (change.type === 'added') {
               if (!change.doc.metadata.hasPendingWrites) {
                  commit('SET_USER', {
                     id: change.doc.id,
                     ...change.doc.data()
                  })
               }
            }

            if (change.type === 'modified') {
               commit('SET_USER', {
                  id: change.doc.id,
                  ...change.doc.data()
               })
            }

            if (change.type === 'removed') {
               commit('DELETE_USER', change.doc.id)
            }
         })
      })
   }
}

export default {
   namespaced: true,
   state,
   mutations,
   getters,
   actions
}