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.

  • Pongamos en práctica todo lo aprendido sobre Firestore en el Curso de Firebase creando una vista que permita añadir salas de conversación a nuestro proyecto VueTalk
  • Primero, debemos crear el componente que haga de vista: CreateRoom.vue y en él un formulario para asignar el nombre y la descripción de la sala.
  • Luego, debemos añadir la ruta en nuestro archivo de enrutamiento router/index.js.
const CreateRoom = () => import("../views/CreateRoom.vue");
...
{
    path: "/create",
    name: "create",
    component: CreateRoom,
    meta: {
         requiresAuth: true
    }
}
  • Sin olvidar actualizar el enlace desde nuestro componente cabecera a la nueva sección.
<router-link class="navbar-item" :to="{ name: 'create' }">
    Create Room
</router-link>
  • El siguiente paso es crear la acción en nuestro módulo rooms de Vuex que nos permita conectar con Cloud Firestore.
import { db } from "../firebase.js";
...
async createRoom({ rootState }, { name, description }) {
  await db.collection("rooms").add({
    name,
    description,
    createdAt: Date.now(),
    admin: rootState.user.user.uid
  });
} 
  • Por último nos queda completar el método local createRoom en el compoente CreateRoom.vue para que conecte con la acción Vuex recién creada.
async createRoom() {
    this.isLoading = true;
    try {
        await this.$store.dispatch("rooms/createRoom", {
            name: this.roomData.name,
            description: this.roomData.description
        });
    this.$toast.success("Room created");
    this.roomData.name = this.roomData.description = "";
    setTimeout(() => this.$router.push({ name: "home" }), 1000);
    } catch (error) {
        console.error(error.message);
        this.$toast.error(error.message);
    } finally {
        this.isLoading = false;
    }
}

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue