Bienvenida e Introducci贸n

1

Bienvenida y Presentaci贸n del proyecto: PlatziRooms

2

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

3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

4

驴Que son las Render Functions y JSX?

5

Preparando nuestro entorno para un prototipo

6

Creaci贸n de un componente con createElement

7

Utilizando JSX para la creaci贸n de un componente

8

Utilizando Slots con Render Functions y JSX

9

Creando un Modal de Login para PlatziRooms

10

Creando la l贸gica general de nuestros modales con Vuex

11

Creando el contenido de nuestro modal

Componentes controlados y uso de librer铆as externas

12

Componentes Controlados y Variables Personalizadas

13

Construcci贸n del componente de Recordar Contrase帽a

14

Creaci贸n de un componente Slider utilizando la librer铆a tiny-slider

High Order Functions

15

驴Qu茅 son las High Order Functions? - Crea tu primera HOF

16

Vuex

17

Obtener datos usando Vuex

18

Crea un getter din谩mico en Vuex utilizando HOF

19

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

20

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

21

Instalaci贸n y Configuracion de Firebase Realtime Database

22

Obteniendo los datos desde Firebase Realtime Database

23

Agregando la consulta de usuarios

24

Almacenando nuevas publicaciones en Firebase Realtime Database

25

Perfeccionando el flujo de navegaci贸n de nuestra App

Autenticaci贸n con Firebase

26

Configuracion Inicial para trabajar con Firebase Authentication

27

Agregando nuevos usuarios en firebase autentication

28

Inicio de sesi贸n de usuario

29

Cierre de sesi贸n de usuario

30

Protegiendo p谩ginas utilizando Navigation Guards

Scoped Slots

31

驴Qu茅 son los Scoped Slots? D贸nde utilizarlos y por qu茅

32

Integraci贸n de Scoped Slots en Platzi Rooms

Deploy

33

Creando y desplegando nuestra app en Heroku

34

Conclusiones y Despedida

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creando un Modal de Login para PlatziRooms

9/34
Recursos

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

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榙isplay: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?