Creando la lógica general de nuestros modales con Vuex

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

Resumen

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.

Julio Hernandez Gorocica

student•

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

Jesús Alberto Martínez Hernández

student•

gracias!

arnold Solorzano

student•

me dio un error al copiar el código que pusiste, pues la propiedad se llama ignorePropertyModificationsFor

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

Juan Castro

teacher•

Comunicación entre componentes con Vue - Javier Diaz en Medium (artículo del porfe :sunglasses:)
Data Flow in VueJs — VueX Application
Data Flow in Vue and Vuex: Share state across components
Should I Store This Data in Vuex? Why use Vuex in the first place? - Reasons for storing data in Vuex

Freddy Córdova Arana

student•

Gracias por los artículos 😁👍

Alexander Valencia

student•

(y)

David Wagner

student•

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",
        ]
      }
    ],

Luis David Galicia García

student•

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

Alejandro González Reyes

student•

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

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

Diego Forero

Team Platzi•

Lo que veo del código simplemente tu pasas los valores como objetos en el caso de payload en lugar de pasar los valores explícitos los pasas como un objeto y no pasas el commit si no el contexto que contiene el commit, son formas diferente de acceder a las variables, probablemente para mi es mas legible la que usa el profesor, pero hay que ver todo el código.

Nelson Manuel Ordaz Yglesias

student•

La única diferencia es como envías la información de name y value. En ambos casos son objetos, sin embargo, en el primero caso se mandan los datos de forma explícita, y en el segundo de forma implícita. Es como que enviaras un paquete (caja, bolsa, etc.) con dos productos (name y value) sin envolver, al descubierto, y en el otro caso envías el paquete pero, los productos van envueltos sin saber que son hasta que los abres. No se si me di a entender. Saludos.

William Avila Poma

student•

Hola y como podria detectar el cambio del estado si sale sin apretar los botones?

Manuel Ojeda

student•

Dentro de Vue.js hay una propiedad que se le puede asignar a los v-model que son asigandos a un elemento HTML, digo atributo es v-on:change o @change, en esa propiedad puedes ejecutar un metodo que hará el cambio en el estado.

<input v-model="tuModelo" type="text" @change="tuMetodo()" />

Javier Diaz Chamorro

teacher•

Hola wavilap, primeramente, recordemos que el estado se propaga a nivel de aplicación a través de this.$store, por lo tanto, podrías utilizar o crear un método toggle que se encargue de realizar este comportamiento, incluso desde un evento de teclado usando Esc.

Juan Esteban Galvis

student•

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.

Carlos Eduardo Gomez García

teacher•

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

Sebastián Buitrago

student•

Exactio ademas creo que eso disminuye el perfomance al tener que emitir un evento extra el modal al padre

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

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

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