Obtener datos usando Vuex

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

Resumen

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.

Edward Steven Ramos Palacios

teacher•

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"

Jesús Miguel Quinto Teran

student•

Interesante uso del for para repetir contenido:

v-for="i in 12"

Alejandro González Reyes

student•

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

Jesús Miguel Quinto Teran

student•

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.

Miguel Herreros Cejas

student•

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?

Diego Forero

Team Platzi•

Creo que si es posible, pero es fácil de probar, cambia la versión de vue-cli en el package.json e instala las dependencias y cuéntanos como te va, una de las mejores formas de aprender es experimentar si se rompe, nos muestras el error y vemos si podemos solucionarlo entre todos, si funciona entonces queda resuelta tu pregunta. ;)

César Ernesto Rivas Martínez

student•

Segun mis conocimientos, deberia de, porque VUE es una cosa y VUE CLI es otra, la utilizacion de

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

No depende de VUE CLI, porque es sintaxis de EMACSCRIPT.

Omar Jesus Hernández Bastos

student•

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',
    }),
  },

Angel Cabrera

student•

Falso, compañero. El primer caso y el segundo caso traen la misma cantidad de datos, la única diferencia es que en el primer caso estás guardando el valor en una variable computada con el mismo nombre del getter. Y en el segundo caso estás guardando el valor en una variable computada con un nombre distinto al nombre del getter.

Fernando Robles

student•

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">

Juan Esteban Galvis

student•

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

Carlos Eduardo Gomez García

teacher•

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...

Obtener datos usando 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