Vuex desde cero

En esta serie de lecciones te enseñaré todo lo que tienes que saber para dominar los aspectos esenciales de Vuex: la librería de manejo de estado "oficial" del ecosistema Vue.

Quizás pienses que esto de state management no es para ti, pero te equivocas. Aprender a gestionar el estado de tu aplicación de forma centralizada y predecible te ayudará a desarrollar de forma más segura. Al fin y al cabo siempre hay estado que manejar. La decisión se centra en seguir aumentando el tamaño de tus componentes y clonando piezas de estado que van y vienen a través de propiedades y eventos o dedicar un par de horas a dominar Vuex y comenzar a trabajar "a la Vuex way".

En las siguientes lecciones aprenderás:

Qué es el estado.
Qué son las mutaciones.
Cómo funcionan las acciones.
Para qué sirven los getters.
Cómo acceder a la store desde cualquier componente.
Cómo utilizar Vuex y v-model.
Cómo ahorrar tiempo usando los mapHelpers de Vuex.
Cuándo utilizar estado local y cuando estado centralizado.
Cómo dividir una store en módulos independientes e interconectados.

Al finalizar la serie podrás comenzar a utilizar Vuex en tus propios proyectos.

Para poder aprovechar la formación debes tener conocimientos esenciales de Vue, algo que puedes encontrar aquí en Escuela Vue.

Ver en Hoja de Ruta

Intermedio Vue

Repositorio de la serie

Qué es Vuex

Se trata de la implementación "a la Vue" de un patrón de gestión del estado de cualquier aplicación. Vuex es la solución oficial al problema de estado en Vue.

Cómo instalar Vuex

Instalar Vuex es sencillo. Puedes añadir Vuex como dependencia de forma visual con VueUI. También puedes añadirlo de forma tradicional con npm o yarn.

Mutaciones Vuex

Las mutaciones Vuex son clave ya que se encargan de mutar el estado. Sólo ellas pueden hacerlo por lo que entender cómo utilizarlas es imprescindible.

Acciones Vuex

Una de las confusiones principales en Vuex es la diferencia entre mutaciones y acciones Vuex. A diferencia de las mutaciones pueden ser asíncronas. Veamos cómo.

Getters Vuex

Los getters Vuex son algo así como las propiedades computadas para Vuex. Permiten acceder al estado y devolver una versión independiente y transformada.

Añadir productos al carro

Curso Vuex. Comencemos a aplicar los conceptos esenciales Vuex a nuestro pequeño proyecto. Más concretamente para añadir los productos al carrito de la compra.

Mostrar el carrito

Vamos un paso más allá y a través de un getter Vuex podremos mostrar los productos que ya están en nuestro carro.

Eliminar productos del carro

Curso Vuex. Haciendo uso de las mutaciones Vuex vamos agregar la función para eliminar productos del carrito de la compra.

Mostrar el total

En esta lección usaremos Vuex y la librería currency.js para componer el total de los productos en nuestro carrito de la compra.

Proceso de checkout

Gracias a las acciones Vuex podemos crear un sistema que recoja los productos de nuestro carro y se comunique con nuestra API para realizar el checkout.

Vuex Devtools

Ya hemos hablado de Vue Devtools en Escuela Vue. Sin embargo igual no conoces que dentro de ellas existe una pestaña y opciones para Vuex. Veamos cuales.

Cómo usar Vuex y v-model

Usar Vuex y v-model puede ser complicado. En esta lección te explicaré como comunicar de forma efectiva nuestra store Vuex con elementos de formulario.

Vuex getters como funciones

Por defecto, los Vuex getters no aceptan argumentos, pero si hacemos que retornen una función, sí. Son muy útiles para hacer cosultas en tu store, por ejemplo.

Vuex map helpers

Para acceder al estado hemos declarado propiedades computadas. Esto puede ser tedioso. Solución: Vuex ofrece map helpers que retornan valores del estado.

Vuex modules

Para lograr un mejor mantenimiento y actualización, los Vuex modules nos permiten dividir nuestra store en varias piezas independientes pero interconectadas.