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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Vuex es una librería para manejar el estado de nuestras aplicaciones con Vue.js. sin aumentar su complejidad. Esta herramienta facilita la comunicación entre componentes sin importar en qué parte de nuestra aplicación o del árbol de componentes nos encontremos.
Vuex utiliza un store centralizado, un único lugar donde guardamos el estado compartido de nuestros componentes. Cada componente se comunica con el store y este se encarga de comunicarse con toda la aplicación. Así, podemos comunicar más fácilmente todas las partes de nuestra aplicación sin importar su posición, ni siquiera si se trata de comunicar componentes hijos con sus padres.
En este caso, vamos a usar Vuex para controlar nuestro componente Modal.
Aportes 11
Preguntas 1
Los estilos del Modal.vue
<style scoped>
.modal {
min-width: 350px;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2000;
@apply absolute bg-white p-4 shadow-lg rounded;
}
.modal > .modal-head {
@apply relative;
}
.modal-wrapper::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(37, 37, 37, 0.8);
}
</style>
En resumen implementamos un modal un poco mejor diseñado usando componentes y usando JSX, me parece que el TOGGLE_MODAL_STATE pudo implmentarse directamente en el objeto mutations, a no ser que pretendamos hacer llamadas asíncronas…
Guao! Hace unos meses cuando aprendía Vuex trabajé exactamente igual para progagar los estados de la modales desde distintos componentes!!.. 😋😋😋
Que bonito se siente cuando la pensaste igual que el profe!!
¿Tenía entendido que tanto la mutacion como el action recibe el payload.?
pero en este caso ese payload lo declara dividido (name, value). A que se debe ello
hay inconsistencia entre los archivos del repositorio y los de la clase…
cuando se instalo material-icons ya que el mio no se instalo
Hay que tener cuidado con los estilos de la clase “.modal”, dado que puede no visualizarse por overrride si tiene Bootstrap 4.
En especial, Bootstrap 4 tiene ‘display:none’ por defecto en la clase modal
En vue3 para usar un los slots deben agregar () como si estuvieran invocando una funcion en este caso seria asi
{this.$slots.default()}
Para encontrar archivos en vsc facilmente, presionen
ctrl + p
y pongan el nombre del archivo o de la carpeta y listo
Por si desean profundizar el tema de los slots más, les dejo esta documentación de Vue.js: https://es.vuejs.org/v2/guide/render-function.html
Cuál es el motivo de usar la acción para llamar la mutación en lugar de hacer el commit directamente en los componentes? Es por buenas prácticas?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?