El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, aprenderemos sobre la gestión de estado en Vue.js utilizando Vuex. Vuex es una biblioteca de gestión de estado para aplicaciones Vue.js, que permite centralizar el estado de la aplicación y gestionar su mutación de manera predecible. Este módulo cubre los conceptos fundamentales de Vuex: estado, getters, mutaciones y acciones.

Estado (State)

El estado en Vuex es un objeto que contiene los datos de la aplicación. Es el único lugar donde se almacena el estado de la aplicación, lo que facilita su gestión y depuración.

Ejemplo de Estado

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

export default store;

En este ejemplo, hemos creado un estado con una propiedad count inicializada en 0.

Accediendo al Estado

Para acceder al estado en un componente Vue, utilizamos la propiedad this.$store.state.

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

Getters

Los getters son funciones que obtienen y procesan el estado. Son similares a las propiedades computadas en Vue.js y se utilizan para derivar datos del estado.

Ejemplo de Getters

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

Accediendo a los Getters

Para acceder a los getters en un componente Vue, utilizamos la propiedad this.$store.getters.

<template>
  <div>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
};
</script>

Mutaciones (Mutations)

Las mutaciones son funciones que cambian el estado de la aplicación. Son la única forma de modificar el estado en Vuex y deben ser síncronas.

Ejemplo de Mutaciones

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

Comitiendo Mutaciones

Para cometer una mutación en un componente Vue, utilizamos el método this.$store.commit.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};
</script>

Acciones (Actions)

Las acciones son funciones que pueden contener operaciones asíncronas y que comiten mutaciones. Se utilizan para realizar tareas como llamadas a APIs antes de cometer una mutación.

Ejemplo de Acciones

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

Despachando Acciones

Para despachar una acción en un componente Vue, utilizamos el método this.$store.dispatch.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

Ejercicio Práctico

Ejercicio

Crea un nuevo estado llamado todos que sea un array vacío.
Añade una mutación llamada addTodo que acepte un objeto todo y lo añada al array todos.
Añade una acción llamada addTodoAsync que acepte un objeto todo, espere 1 segundo y luego comita la mutación addTodo.
Crea un componente que permita añadir un nuevo todo utilizando la acción addTodoAsync.

Solución

// store.js
const store = new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    }
  },
  actions: {
    addTodoAsync({ commit }, todo) {
      setTimeout(() => {
        commit('addTodo', todo);
      }, 1000);
    }
  }
});

export default store;

<template>
  <div>
    <input v-model="newTodo" placeholder="Add a todo" />
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="todo in todos" :key="todo">{{ todo }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    todos() {
      return this.$store.state.todos;
    }
  },
  methods: {
    addTodo() {
      this.$store.dispatch('addTodoAsync', this.newTodo);
      this.newTodo = '';
    }
  }
};
</script>

Conclusión

En este módulo, hemos aprendido sobre los conceptos fundamentales de Vuex: estado, getters, mutaciones y acciones. Estos conceptos son esenciales para gestionar el estado de una aplicación Vue.js de manera eficiente y predecible. En el próximo módulo, exploraremos cómo estructurar y modularizar el estado utilizando Vuex.

Estado, Getters, Mutaciones y Acciones

Estado (State)

Ejemplo de Estado

Accediendo al Estado

Getters

Ejemplo de Getters

Accediendo a los Getters

Mutaciones (Mutations)

Ejemplo de Mutaciones

Comitiendo Mutaciones

Acciones (Actions)

Ejemplo de Acciones

Despachando Acciones

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js