Vuex es una librería para gestión del estado (State Management) de aplicaciones Vue.js. Sirve como un almacén centralizado para todos los componentes de una aplicación Vue, con reglas que garantizan que el estado se puede cambiar de manera predecible.

También se integra con la extensión devtools oficial de Vue para proporcionar funciones avanzadas como la depuración y snapshots:

State Management Pattern

Si empezamos con una aplicación Vue muy sencilla:

Donde:

• El estado es la fuente que impulsa nuestra aplicación;
• La vista, un mapeo declarativo del estado;
• Las acciones, las posibles formas en que el estado podría cambiar en respuesta a las entradas del usuario desde la vista.

Es un escenario simple esto se maneja de forma sencilla, pero qué pasa cuando tenemos varios componentes que comparten un estado común:

• Múltiples vistas pueden depender de la misma pieza de estado.
• Las acciones desde diferentes puntos de vista pueden necesitar cambiar el mismo estado.

La idea del patrón es extraer el estado compartido de los componentes y gestionarlo en un singleton global.

Con esto, nuestro componente se convierte en una gran "Vista", y cualquier componente puede acceder al estado o desencadenar acciones, sin importar dónde se encuentren en el árbol.

Al definir y separar los conceptos envueltos en la gestión del estado hacemos que el código sea más mantenible.

Esta es la idea básica detrás de Vuex, inspirada en Flux, Redux y The Elm Architecture.

A diferencia de los otros patrones, Vuex también es una librería.

¿Cuándo usarlo?

Vuex nos ayuda a lidiar con la gestión compartida de los estados.

Si nunca ha construido un SPA a gran escala y se ha lanzado directamente a Vuex, puede resultar demasiado verboso. Si la aplicación es simple, probablemente no necesitarás Vuex. Un simple Store Pattern puede servir.