¿Cómo utilizar una mutación dentro de una plantilla de componente? VUEX

Question

Estoy aprendiendo Vue con VUEX y estoy haciendo y aplicación pequeña. Esa pequeña aplicación llama a los datos json e imprímalo en una plantilla. He creado una mutación llamada año(), que la mutación consigue un mundo de una cuerda y devuelve el resultado, pero cuando uso esa mutación dentro de la plantilla {{ año(item.fechaInicio)}} devolver un valor vacío. Ese es mi código HTML: html Vue bootstrap 4 CSS fontawesome css Tipografía Jquery cookies jquery Vue Vuex [email protected]/dist/vuex.js > CSS estilos Calendario Académico Estudiantes TAB 1 ESTUDIANTES Semestres Semestre 1 Enero 17-2020 Mayo 15-2020 Semestre 2 Agosto 15-2020 Diciembre 20-2020 Intersemestral Enero 17-2020 Mayo 15-2020 Organizar por: Fecha Inicio Fecha Final Formulario de Busqueda icono Tipo de programa Pregrado Posgrado Categoria Cierre académico Comité de idiomas Exámenes finales Homologaciones, reconocimientos y validaciones Inicio y finalización de clases Otras actividades de la vida universitaria Pago de matrículas Proceso de inducción Publicación de grupos cancelados Recesos y vacaciones Registro de asignaturas Reporte de notas Reserva de cupo, re activaciones de cupo y reintegros Retiro de asignaturas Tipo de programa Escuela de Administración Escuela de Medicina y Ciencias de la Salud Escuela de Ciencias Humanas Facultad de Economía Facultad de Jurisprudencia Facultad de Estudios Internacionales, Políticos y Urbanos Facultad de Ciencias Naturales Facultad de Creación Escuela de Ingeniería, Ciencia y Tecnologí icono Seleccione un mes Seleccione un mes Fecha inicial Fecha final Buscar Limpiar Ese es mi código de javascript: //componentes Vue.component('actividades', { template: /*html*/ ` icono Marzo 08 Abril 17 2020 Tipo de programa {{ item.tipoPrograma }} Facultad {{ item.facultad }} Programa {{ item.programa }} Categoria {{ item.categoria }} {{ item.contenido }} It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lugar: Universidad del Rosario, Sede, Claustro, Aula Mutis Fecha de inicio: Marzo, de {{ year(item.fechaInicio) }} Fecha de cierre: 12 Marzo, de 2020 Hora: De 8:00 a.m. a 12:30 p.m {{ item.periodo }} Cerrado `, computed: { ...Vuex.mapState(['actividades','programas']), }, methods: { ...Vuex.mapActions(['llamarJson']), ...Vuex.mapMutations(['year']) } }); //VueEx const store = new Vuex.Store({ state: { actividades: [], programas: [] }, mutations: { llamarJsonMutation(state, llamarJsonAction){ state.actividades = llamarJsonAction.Nueva_estructura_proveedor; state.programas = llamarJsonAction.BD_programas; }, year(date){ return String(date).substr(8, 2); } }, actions: { llamarJson: async function({ commit }){ const data = await fetch('calendario-2021-prueba.json'); const dataJson = await data.json(); commit('llamarJsonMutation', dataJson); } } }); //Vue new Vue({ el: '#caja- vue', store: store, created() { this.$store.dispatch('llamarJson'); } });

pixelpioneerbbb5 · Accepted Answer

No devuelva el valor en mutación. Las mutaciones son para los estados mutantes en vuex. En su lugar, añadir una propiedad a estado como año entonces en el mutaitioner sólo añadir :

state.year = String(date).substr(8, 2);

Luego en su componente y en adición computada:

year(){
    return this.store.state.year;
}

Y ahora, puedes acceder {{year}} en tu plantilla.

Respondida el Dec 18, 2020 a las 22:25 - por pixelpioneerbbb5

Gpt · Answer

El problema que estás experimentando es que estás intentando utilizar una mutación en lugar de un getter para realizar una transformación en los datos antes de mostrarlos en la plantilla. Las mutaciones en Vuex se utilizan para modificar el estado de la aplicación de manera síncrona, no para realizar transformaciones en los datos.

En su lugar, puedes utilizar un getter para realizar la transformación que necesitas antes de mostrarlo en la plantilla. Te recomendaría modificar tu código de la siguiente manera:

Elimina la mutación `year` del objeto `mutations` en Vuex y crea un getter en su lugar.

javascript
getters: {
  getYear: state => date => {
    return String(date).substr(8, 2);
  }
}

Modifica la sección de `methods` en tu componente `actividades` para que puedas utilizar el getter `getYear`:

javascript
methods: {
  ...Vuex.mapActions(['llamarJson']),
  ...Vuex.mapGetters(['getYear'])
}

Modifica la plantilla del componente `actividades` para utilizar el getter en lugar de la mutación:

html
Fecha de inicio:
Marzo, de {{ getYear(item.fechaInicio) }}

Con estos cambios, deberías poder obtener el resultado deseado al llamar al getter getYear en la plantilla de tu componente. ¡Espero que esto te ayude a solucionar tu problema!

Respondida el Dec 19, 2020 a las 22:22 - por Gpt

Gemini · Answer

El problema es que estás intentando llamar a una mutación dentro de una plantilla, lo cual no está permitido. Las mutaciones solo se pueden llamar desde dentro de las acciones o los componentes. Para solucionar este problema, debes mover la lógica de la mutación year a una acción y luego llamar a esa acción desde el componente. Aquí tienes el código actualizado: Componente actividades: html icono Marzo 08 Abril 17 2020 Tipo de programa {{ item.tipoPrograma }} Facultad {{ item.facultad }} Programa {{ item.programa }} Categoria {{ item.categoria }} {{ item.contenido }} It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more- or-less normal distribution of letters, as opposed to using &39;Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lugar: Universidad del Rosario, Sede, Claustro, Aula Mutis Fecha de inicio: Marzo, de {{ getYear(item.fechaInicio) }} Fecha de cierre: 12 Marzo, de 2020 Hora: De 8:00 a.m. a 12:30 p.m {{ item.periodo }} Cerrado Muestra: javascript const store = new Vuex.Store({ state: { actividades: [], programas: [] }, mutations: { llamarJsonMutation(state, llamarJsonAction){ state.actividades = llamarJsonAction.Nueva_estructura_proveedor; state.programas = llamarJsonAction.BD_programas; } }, actions: { llamarJson: async function({ commit }){ const data = await fetch('calendario-2021-prueba.json'); const dataJson = await data.json(); commit('llamarJsonMutation', dataJson); }, getYear: function({ commit }, date){ return String(date).substr(8, 2); } } }); new Vue({ el: 'caja-vue', store: store, created() { this.$store.dispatch('llamarJson'); } }); Explicación: En el código actualizado, hemos movido la lógica de la mutación year a una acción llamada getYear. Llamamos a esta acción desde la plantilla usando la sintaxis getYear(item.fechaInicio). Esto garantiza que la lógica de la mutación solo se ejecute cuando sea necesario y no interfiera con el ciclo de vida de Vue.

¿Cómo utilizar una mutación dentro de una plantilla de componente? VUEX

3 Respuestas: