Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue