¿Qué es?

Permite estructurar Single Page Applications y manejar sus estados de una forma fácil de entender y mantener

¿Estados?

Datos que usa nuestra aplicación en cualquier momento

Estados a nivel del componente

Son datos usados solo por un componente.

Aquellos datos que se le pasan a un componente de Vue

Estados a nivel de la aplicación

Son datos usados por multiples componentes.

Podemos categorizarlos como:

¿Qué pasa cuando el código crece?

• ¿Qué componente fue el que provocó el evento?
• ¿Qué componentes están escuchando?
• La lógica de negocio está en todas partes, en lugar de estar centralizada.
• Los componentes padres comienzan a estar mas acoplados a los componentes hijos.

Estos son algunos de los efectos y preguntas que pueden surgir:

¿Cómo funciona Vuex?

Hay 4 conceptos claves a entender:

• Árbol de estados: Es un objeto que contiene todos los estados a nivel de la aplicación.
• Getters: Sirve para acceder a los datos en el árbol desde nuestro componente de Vue.
• Mutators: Eventos que sirven para modificar los estados del árbol.
• Actions: Funciones llamadas desde los componentes de Vue para desencadenar las mutaciones.

• El flujo de datos es unidireccional.
• Solo las mutaciones pueden modificar el árbol de estados.
• Los datos en el árbol son reactivos - si se modifican en él, también se verá reflejado en los componentes

¿Cómo funciona Vuex?

¿Ahora qué?

Vue Devtools

https://github.com/vuejs/vue-devtools

Vue Docs

https://vuejs.org/v2/guide/