Mutations

Mutaciones, La única forma de cambiar realmente el estado en una tienda Vuex es cometiendo una mutación. Las mutaciones de Vuex son muy similares a los eventos: cada mutación tiene un tipo de cadena y un controlador. La función de controlador es donde realizamos modificaciones de estado reales, y recibirá el estado como primer argumento

Prácticamente el commit es una manera de mandar a llamar a una función definida en el store, y las mutaciones son como los métodos, y al ser reactivas pueden propagarse los cambios cada que estas cambien

GENIAL

Por fin logro entender Mutations, excelente Profesor.

Gracias ! Explicas super claro todo, vengo de react y justo ahora estoy trabajando en un proyecto con Vue y queria implementar flux, redux o algo parecido

Esto es genial.

Tengo una duda, si quisiera enviar los payload con mapMutation, cómo lo haría ?

Genial!

Explicación puntal del { } para importar cosas específicas del módulo, y de los MapMutation y MapSatate.

Este curso y el de Laravel 2017 son de los mejores

Saludos. De casualidad el código de este ejemplo está en un repositorio?

in Aplication

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ count }}</p>
    <input type="number" placeholder="Escoge el número" v-model="chooseYourNumber">
    <br>
    <br>
    <button @click="decrementNum(1000)">-1000</button>
    <button @click="decrementNum(100)">-100</button>
    <button @click="decrementNum(10)">-10</button>
    <button @click="minus">-1</button>
    <button @click="init()">Choose</button>
    <button @click="increment">+1</button>
    <button @click="incrementNum(10)">+10</button>
    <button @click="incrementNum(100)">+100</button>
    <button @click="incrementNum(1000)">+1000</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },

  data() {
    return {
      chooseYourNumber: ''
    }
  },

  computed: {
    ...mapState(['count'])
  },

  methods: {
    ...mapMutations([
      'increment',
      'minus'
    ]),
    incrementNum(num) {
      this.$store.commit('incrementPLUS', {
        number: num
      });
    },
    decrementNum(num) {
      this.$store.commit('minusPLUS', {
        number: num
      });
    },
    init() {
      this.$store.commit('init', parseFloat(this.chooseYourNumber));
    }
  }
};
</script>

Store

import Vuex from "vuex";
import Vue from 'vue';

Vue.use(Vuex);

//https://www.instagram.com/p/B-pmB-5BTRX/
const vueX = new Vuex.Store({
    state: {
        count: 0
    },

    mutations: {
        increment(state) {
            state.count ++;
        },
        minus(state) {
            state.count --;
        },
        incrementPLUS(state, ten = {}) {
            state.count += ten.number || 1
        },
        minusPLUS(state, asa = {}) {
            state.count -= asa.number || 1
        },
        init(state, num) {
            state.count = num
        }
    }
});

export default vueX;

Había escuchado o tenía entendido que las mutaciones eran como buenas prácticas en vez de modificar directamente el state pero ahora veo que el commit es lo que lo hace tan importante.

Me parece super útil los map que trae Vuex! 💚

Si quieren revisar el codigo de esta clase y de las siguientes pueden hacerlo en este codesandbox

Solo a mí me pasa o este vídeo se toma la vida en cargar?