[Vuejs]-Vue.js, vuex with Firebase cloud firestore, updating the front end after adding or removing any record from the database

by

0👍

I’ll try to answer the first question.

you are committing to the store as a promise is resolved.
I think the promise is resolved only once.

Try to attach your code directly to the collection with onSnapshot so you can pass the observer directly the the collection observable:

…

actions: {
  //I dispatch this action  in the created life hook of my root .vue app component to have the items loaded upon initilizing the app
  fetchMenuItems({commit}){
    const menuItems = []
      db.collection('myCollection').onSnapshot(snapshot => {
          snapshot.forEach(doc => {
            let item = doc.data()
            item.id = doc.id;
            menuItems.push(item)
          })
          commit('SETMENUITEMS', menuItems)
        })
        .catch(err => console.log(err))
  },
  removeItem({commit}, id){
    db.collection('myCollection').doc(id).delete()
      .then(() => {
        //at this point the item is already deleted from the database but since the ap didn't reload the item is still showing 
        commit('REMOVEITEM', id)
      })
      .catch(err => console.log(err.message)
  }
},

…

about removing an entire collection it is not reccomended from a web client as you can see in the doc: Delete data

Leave a comment