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 la l贸gica general de nuestros modales con Vuex

10/34
Recursos

Gracias a Vuex podemos comunicar componentes de diferentes partes de nuestra aplicaci贸n. Ahora, vamos a aprovechar esta funcionalidad para abrir nuestro modal cuando pulsamos el bot贸n de Login en el Header.

Para este debemos configurar nuestro componente de modal para solo activarse cuando la variable del store es true. As铆, podemos disparar un cambio a estas variables del store desde cualquier parte de la aplicaci贸n (por ejemplo, con el boton de login en el header) y abrir o cerrar el modal. Vamos a realizar este mismo proceso para cerrar el modal desde el icono de la X.

Aportes 7

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Les dejo aqu铆 la regla de ESLint para copiar y pegar

'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationFor: [
        'state', // for vuex state
      ]
    }]

En mi caso tuve que cerrar y volver a abrir mi editor

En mi caso no me valio por que tenia que definir los los valores como json, con todo les dejo aqui lo que me funciono a mi

"no-param-reassign": [
      "error",
      {
        "props": true,
        "ignorePropertyModificationsFor": [
          "state",
        ]
      }
    ],

Para buscar ir a un archivo o 鈥楪o to file鈥 en visualCode se usa:
On Windows Ctrl+p or Ctrl+e
On macOS Cmd 鈱+p
On Linux Ctrl+p or Ctrl+e

Me pueden explicar que signficado tiene esta parte del c贸digo con respecto a la que yo declar茅.
El profe

mutations: {
    SET_MODAL_STATE: (state, { name, value }) => {
      state.modals[name] = value;
    },
  },
  actions: {
    TOGGLE_MODAL_STATE: ({ commit }, { name, value }) => {
      commit('SET_MODAL_STATE', { name, value });
    },
  },

Yo

mutations: {
    SET_MODAL_STATE(state, payload) {
      // Se puede acceder a los atributos de un objeto mediante sintaxis de array
      // apuntamos al modal (path) y cambiamos su valor (value)
      state.modals[payload.name] = payload.value;
    },
  },
  actions: {
    TOGGLE_MODAL_STATE(context, payload) {
      context.commit('SET_MODAL_STATE', payload);
    },
  },

La verdad estoy algo perdido con lo de Vuex, osea todo funciona pero hay cosas que no tengo claras del todo (Para decir que yo har铆a esto por mi cuenta no)

  • Alguien me podr铆a explicar c贸mo funciona el archivo store.js? Yo entender铆a que state son como variables, mutations como funciones que har谩n el cambio y actions como una funci贸n que llama a la mutaci贸n. no?

  • En actions qu茅 es commit?

En los otros archivos creo que es m谩s sencillo de entender pero el archivo store.js no lo termino de entender por completo, agradezco su ayuda compa帽eros.

En este caso Vuex se encarga de propagar todos los cambios a todos los componentes que los requieran. A煤n as铆 no entiendo por qu茅 el componente Modal tiene que emitir el evento close y el DefaultLayout tiene que cerrarlo, si el mismo modal puede cerrarlo usando Vuex鈥