Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • 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>
Código inicial
Aprende Firebase en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?

Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬