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•

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