Agregando datos con Vuex

Clase 20 de 34 • Curso Avanzado de Vue.js 2 y Firebase por Bedu

Carlos Eduardo Gomez García

teacher•

Increíble! Ya solo falta añadirlo a la base de datos, aún no entiendo muy bien por qué usar actions en lugar de mutations directamente, pero lo voy captando:D

Luis Alberto Reyes Lema

student•

tengo entendido que es por la escalabilidad, cuando es una aplicacion ya muy grande y se necesita trackear los cambios, y trabajar de forma asincrona, se debe utilizar actions, puesto que mutations solo es sincrono

Alejandro González Reyes

student•

¿ Que existe de diferencia entre crear una firma de action de esta forma?

CREATE_ROOM({state, commit}, payload)

y esta otra. Ya que en el curso anterior de VUE, se dijo que el action recibe como parametro el contexto y la carga util

CREATE_ROOM(context, payload)

Omar Crespo

student•

La primera forma usa una nueva forma de js llamada destructuring... La segunda es la forma tradicional. Es una decisión tuya cual usar pero a efectos técnicos es exactamente lo mismo solo azucar para la sintaxis

Omar Crespo

student•

a efectos tecnicos es exactamente lo mismo... Es solo una forma mas directa de acceder a las variables de un parametro, objeto o array. La tecnica se llama destructuring puedes buscar acerca de ella

Sebastián Buitrago

student•

En vue3 la funcion set ya no existe ya que en vue3 vue es completamente reactivo, gracias a los proxys en caso de que quieran conocer mas sobre este tema pueden ver el curso de introduccion a vue3 ahi lo explican a la perfeccion.

Para hacer esto en vue3 deben cambiar esto

SET_ROOM(state, { newRoom, roomId }) {
      Vue.set(state.rooms, roomId, newRoom);
    },
    APPEND_ROOM_TO_USER(state, { roomId, userId }) {
      Vue.set(state.users[userId].rooms, roomId, roomId);
    },

Por esto

SET_ROOM(state, { newRoom, roomId }) {
	state.rooms[roomId] = newRoom
    },
APPEND_ROOM_TO_USER(state, { roomId, userId }) {
	state.users[userId] = roomId
    },

Alejandro González Reyes

student•

Hay un error. Se supone que se agregó al store todas las salas creadas desde el form. ¿porque cuando accedo al home, el store vuelve a su estado normal?

Omar Crespo

student•

El store se reinicia si recargas la página. Este es solo el estado de tu apliación si recargas la página el estado se reinicia... No deberías de tener problema si agregas un enlace al home y a través de links <router-link> te vas al home... Si lo haces manualmente cambiando la ruta recargas la página reinicias el estado y el sitio que agregaste ya no estará

walter Jorge

student•

hola en la clase anterior me redireciona pero se ve en blanco.

Jesús Miguel Quinto Teran

student•

Tu problema parece estar en el Store, Verifica que userRoomsCount este creado correctamente.

userRoomsCount: state => id => countObjectProperties(state.users[id].rooms),

Elvis Saavedra

student•

Salen muchos errores en typescript

Estoy intentando arreglarlos pero se sigue complicando

if (name === 'login' || name === 'register') {
        state.modals[name] = value
      } else {
        console.log('no modal')
      }

No sé si pudieran actualizar al menos la parte del store con typescript, gracias.

Agregando datos con Vuex

Bienvenida e Introducción

Bienvenida y Presentación del proyecto: PlatziRooms

Creación y configuración inicial del proyecto utilizando VUE CLI 3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

¿Que son las Render Functions y JSX?

Preparando nuestro entorno para un prototipo

Creación de un componente con createElement

Utilizando JSX para la creación de un componente

Utilizando Slots con Render Functions y JSX

Creando un Modal de Login para PlatziRooms

Creando la lógica general de nuestros modales con Vuex

Creando el contenido de nuestro modal

Componentes controlados y uso de librerías externas

Componentes Controlados y Variables Personalizadas

Construcción del componente de Recordar Contraseña

Creación de un componente Slider utilizando la librería tiny-slider

High Order Functions

¿Qué son las High Order Functions? - Crea tu primera HOF

Vuex

Obtener datos usando Vuex

Crea un getter dinámico en Vuex utilizando HOF

Creación de la vista para creación de publicaciones

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

Instalación y Configuracion de Firebase Realtime Database

Obteniendo los datos desde Firebase Realtime Database

Agregando la consulta de usuarios

Almacenando nuevas publicaciones en Firebase Realtime Database

Perfeccionando el flujo de navegación de nuestra App

Autenticación con Firebase

Configuracion Inicial para trabajar con Firebase Authentication

Agregando nuevos usuarios en firebase autentication

Inicio de sesión de usuario

Cierre de sesión de usuario

Protegiendo páginas utilizando Navigation Guards

Scoped Slots

¿Qué son los Scoped Slots? Dónde utilizarlos y por qué

Integración de Scoped Slots en Platzi Rooms

Deploy

Creando y desplegando nuestra app en Heroku

Conclusiones y Despedida