Escuchar cambios en tiempo real y des-suscribirse de ellos

• Antes de continuar debemos solucionar dos situaciones que se dan en nuestro módulo rooms.js.
• La primera es que no estamos desactivando el query listener que generamos con la acción getRooms. Lo solucionaremos guardando el query en una pieza del estado llamada roomsListener e invocándola en su momento para des-suscribirnos.
• La segunda se centra en cómo manejamos la información de las salas de conversación cuando hay un cambio: sobre-escribiendo todo.
• Sería mucho mejor escuchar los cambios locales que ocurren sobre los documentos que existen en la colección que se consuta. Podemos hacerlo con el método docChanges() y una mutación para cada tipo de cambio.

const state = {
  ...
  roomsListener: () => {}
};

const mutations = {
	...
  setRoomsListener(state, listener) {
    if (listener) {
      state.roomsListener = listener;
    } else {
      state.roomsListener();
    }
  },
  createRoom(state, { roomData, id }) {
    roomData.id = id;
    state.rooms.unshift(roomData);
  },
  updateRoom(state, { index, roomData, id }) {
    roomData.id = id;
    state.rooms[index] = roomData;
  },
  removeRoom(state, index) {
    state.rooms.splice(index, 1);
  }
};

async getRooms({ commit }) {
    const query = db
      .collection("rooms")
      .orderBy("createdAt", "desc")
      .onSnapshot(doSnapShot);

    commit("setRoomsListener", query);

    function doSnapShot(querySnapshot) {
      commit("setLoading", true, { root: true });
      querySnapshot.docChanges().forEach(change => {
        if (change.type === "added") {
          commit("createRoom", {
            roomData: change.doc.data(),
            id: change.doc.id
          });
        }

        if (change.type === "modified") {
          commit("updateRoom", {
            index: change.newIndex,
            roomData: change.doc.data(),
            id: change.doc.id
          });
        }

        if (change.type === "removed") {
          commit("removeRoom", change.oldIndex);
        }
      });
      commit("setLoading", false, { root: true });
    }
  },

• Por último podemos llamar a la recién creada mutación setRoomsListener en el momento el que hacemos logout para dedactivar el query listener.

actions: {
    checkAuth({ dispatch, commit }) {
      auth.onAuthStateChanged(function(user) {
        if (user) {
          ...
        } else {
          ...
          commit("rooms/setRoomsListener", () => {});
        }
      });
    }
  },