No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

4D
21H
6M
45S

Mutations

41/53
Recursos

Aportes 15

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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?