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>
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿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.