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

Fetch API & Trae

22

Consumir API's REST

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

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Mutations

41/53
Recursos

Aportes 15

Preguntas 4

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

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?