Mostrar salas de chat
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 demapState
.
<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
¿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.