Mutations - Tylung/vue-apuntes GitHub Wiki

Las mutations son muy parecidas a los methods de los componentes de vue, sirven para hacer cambios en el state

Archivo: src/store/index.js

export default createStore({

    state: {
        count: 1,
        lastMutation: 'none'
    },

    mutations: {
        increment( state ) {
            state.count++
            state.lastMutation = 'íncrement'
        },
        incrementBy( state, val) {
            state.count += val
            state.lastMutation = 'íncrementBy'
        }
    }
})
  • increment: Esta mutation eleva en 1 el valor de el count

  • incrementBy: Esta mutation suma un valor que le sea pasado como parametro al count

Para poder ejecutar estas mutations se deben hacer unas modificaciones al counter-vuex.vue

Archivo: src/components/counter-vuex.vue

<template>
   ...
    <button @click="increment">increment +1</button>
    <button @click="incrementBy">increment +5</button>

    <h1>mapState</h1>
    <h2>mapState: {{ count }} </h2>
    <h3>lastMutation: {{ lastMutation }}</h3>
</template>

En el template usamos los clicks para llamar a eventos de este componente

<script>
   ...
export default {
   ...
    methods: {
            increment() {
                this.$store.commit('increment')
            },
            incrementBy( ) {
                this.$store.commit('incrementBy', 5)
            },
        }
}
<script/>
  • increment: Este metodo hace un commit de la mutation increment, lo cual hace que la llame para ejecutarla
  • incrementBy: Este metodo igualmente hace un commit a la mutation incrementBy y le pasa como parametro 5, para que aumente el count en 5
⚠️ **GitHub.com Fallback** ⚠️