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