Introducción

1

Bienvenidos al Curso Profesional de VueJS

2

Introducción a VueJS

CLI y Dev Tools

3

Herramientas y Experiencia de Desarrollo + Archivos .vue

4

CLI - Hello World

5

Webpack

6

Babel

7

Eslint

8

SASS y BULMA

9

PUG

10

Ejercicio de SASS y PUG

11

Ejercicio Avanzado de Pug y SASS

Manipulación del DOM

12

Expresiones

13

Directivas

14

Data Binding

15

Computed properties

16

Watchers

17

Eventos

18

Integración a Platzi Music

19

Ejercicio de Manipulación del DOM

REST y HTTP

20

Servicios

21

Consumir API's REST

22

Fetch API & Trae

Sistema de Componentes

23

Component

24

Creación de componentes

25

Reactividad

26

Ciclo de vida

27

Comunicación entre componentes padres e hijos

28

Comunicación de hijos hacia padres

29

Utilización de Slots

30

Comunicacion entre Componentes Genericos - Event Bus y Plugins

Vue Router

31

Introducción a Vue Router

32

Instalar vue-router y configurar router view

33

Crear y Navegar Rutas con router-link

Extendiendo VueJS

34

Modifiers

35

Filtros

36

Directivas Personalizadas

37

Mixins

Clases, Animaciones y Transiciones36

38

Vue Transitions y Animaciones de CSS

Vuex

39

Estado Centralizado, Flux y Vuex

40

State

41

Mutations

42

Getters

43

Actions

44

Integración a Platzi Music

Nuxt.js

45

Server Side Rendering

46

Nuxt.js

47

Conceptos Básicos de Nuxt

Deploy a Producción con Now

48

Qué es now

49

Configuración de now y deploy

Conclusiones

50

Cierre del curso

Bonus

51

Internacionalización con vue-i18n

52

Unit Test Karma - Mocha & Webpack

53

Implementación de Autenticación de Usuarios en Vue usando JWT

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Mutations

41/53
Recursos

Aportes 15

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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?

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

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?