Mostrar salas de chat

• Como primer paso debemos crear la acción que hará la consulta con Cloud Firestore y nos retornará todas las salas de conversación creadas.

 async getRooms({ dispatch, commit }) {
    const query = db.collection("rooms").orderBy("createdAt", "desc");
    query.onSnapshot(
      querySnapshot => {
          const rooms = [];
          commit("setLoading", true, { root: true });
          querySnapshot.forEach(doc => {
            let room = doc.data();
            room.id = doc.id;
            rooms.push(room);
          });
          commit("setLoading", false, {root: true});
          commit("setRooms", rooms);
      },
      error => this.$toast.error(error.message)
    );
},

• Con la acción Vuex lista, el mejor lugar para invocarla es en nuestra acción de autentificación checkAuth. Cuando hay usuario la invocamos y cuando no lo hay, eliminamos las rooms de nuestro store con una mutación.

checkAuth({ dispatch, commit }) {
  auth.onAuthStateChanged(function(user) {
    if (user) {
      commit("user/setUser", user);
      dispatch("rooms/getRooms");
    } else {
      commit("user/setUser", null);
      commit("rooms/setRooms", []);
    }
  });
}

• Como último paso debemos crear el componente que muestra las salas de conversación (RoomsComponent.vue) e instanciarlo en la vista principal, además de hidratarlo desde Vuex a través de mapState.

<template>
  <section class="section">
    <div class="container">
      <h1 class="title has-text-centered">Rooms</h1>
      <RoomsComponent :rooms="rooms" />
    </div>
  </section>
</template>

<script>
  import RoomsComponent from "../components/RoomsComponent.vue";
  import { mapState } from "vuex";
  export default {
    name: "RoomsView",
    computed: {
      ...mapState("rooms", ["rooms"]),
    },
    components: {
      RoomsComponent,
    },
  };
</script>