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

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Obtener datos usando Vuex

17/34
Recursos

Vamos a convertir nuestros elementos est谩ticos de lista de apartamentos repetidos manualmente en componentes din谩micos que muestran los datos del estado con Vuex.

Para esto debemos crear un getter en el archivo store.js que se encargue de obtener la informaci贸n de los apartamentos que vamos a consumir desde nuestros componentes con la funci贸n mapGetters de Vuex. M谩s adelante vamos a consumir los datos desde la base de datos de Firebase.

Aportes 9

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Interesante uso del for para repetir contenido:

v-for="i in 12"

Para realizar una iteraci贸n y que en la data no tengan alg煤n dato 煤nico como el id pueden usar el index que da la directiva v-for:

v-for="(room, index) in rooms" :key="index"

El usar propiedades computadas evita mutar el estado de un componente padre desde el hijo.

Muy buena clase!..
Unas de las cosas mas interesantes que logre notar es la gran cantidad de datos que ahora descansan sobre Vuex鈥

Simplifica mucho el trabajo.

Una pregunta. La manera de traer los datos a los componentes

import { mapGetters } from 'vuex';
...

...mapGetters({
      user: 'authUser'
    })

驴Se puede utilizar en la versi贸n 2 del CLI de Vue?

Importante entender que cuando usamos

computed:{
	...mapGetters([
	'Arreglo',]),	
}

Nos traemos un arreglo completo, mientras que para traernos una sola variable puntual del state

//variable pura
variable puntual:
  computed: {
    ...mapGetters({
      user: 'authUser',
    }),
  },

En mi caso particular las imagenes no se desplegaban.
Agregu茅 2 puntos al inicio de src y con eso funcion贸.
Ejemplo de la imagen de profile:

<img class="profile__image w-full" :src="profile.avatar">

Creo que con estas 煤ltimas clase me qued贸 un poco m谩s claro Vuex y me parece bastante interesante, aunque pienso que el store de Svelte es m谩s sencillo jaja

Lo que me gusta de esto es la utilizaci贸n de objetos para representar a cada campo del formulario, porque con una simple asignaci贸n podemos cargar todos los datos que tengamos, obviamente en un ambiente real con una base de datos tenemos que cuidar que la contrase帽a no se cuele por ah铆 al momento de hacer la asignaci贸n鈥