Vuex es una libreria para aplicaciones Vue.js. Sirve como una tienda centralizada de datos para todos los componentes de una aplicación.

¿Por qué usar Vuex?
Cuando se desarrolla una aplicacion de mediana o gran escala con vue suelen haber ciertas complicaciones cuando se trabaja con muchos componentes y es que la manera de compartir y enviar informacion entre padre, hijo y el resto de componentes se vuelve una tarea bastante dolorosa. Pero no te preocupes Vuex llega al rescate.
Estructura

Estado (state
):
- Es un objeto que puede contener cualquier tipo de información: strings, arrays u otros objetos.
- Es la información que almacenamos de forma centralizada en toda la app.
const app = new Vue({
el: '#app',
// provide the store using the "store" option.
// this will inject the store instance to all child components.
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
Getters (getters
):
- Son funciones que devuelven variables del
state
. - No cambian el estado pero sí formatean la información para que podamos utilizarla de la manera que la necesitemos.
- Funcionan tal cual como en POO.
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
Mutaciones (mutations
):
- Son funciones que pueden modificar el
state
. - Son síncronas.
- Se pueden inicializar en el componente a utilizar a través de
commit
o inicializarse a través de una acción.
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// MUTANDO EL ESTADO
state.count++
}
}
})
Acciones ( actions
):
- Son funciones asíncronas.
- Poseen la lógica de negocio que cambiar el
state
y deben de llamar amutations
a través decommit
. - La forma de inicializarse en el componente es a través de
dispatch
o utilizando modulos.
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
// posee acceso completo al state
state.count++
}
},
actions: {
increment (context) {
// context hace referencia al store
// para llamar a las mutations
context.commit('increment')
}
}
})

MODULES & NAMESPACES
Los módulos en Vuex nos ayudan a separar lógica de negocio a medida que nuestra aplicación va creciendo de esta manera nos segura que el store se mantenga ordenado, código legible y escalable.
Mientras que namespaced: true
le indica a Vuex que tome el nombre del módulo para no caer en ambigüedades cuando llamamos a alguna variable del state
con el mismo nombre dentro de otro módulo.
const product = {
namespaced: true,
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const user = {
namespaced: true,
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
product
user
}
})
store.state.product // -> `product`'s state
store.state.user // -> `user`'s state
¿Cómo acceder al STORE?
Existen muchas maneras de acceder nuestra tienda de datos ya sea de manera global a traves de $store
o por medio de importación de los módulos mapState
, mapGetters
, mapMutations
, mapActions
desde Vuex. Cual sea la opción que utilicemos no debemos olvidar llamar al módulo correspondiente si estamos usando namespaces. Aquí les dejo un ejemplo sencillo comparativo de ambas maneras de acceder al state.
MyComponent.vue
<template>
<!-- de manera GLOBAL a traves del $store -->
<h1>{{$store.state.user.name}}</h1>
<!-- via computed properties -->
<h1>{{name}}</h1>
</template>
<script>
// por medio de importación desde Vuex
import { mapState, mapGetters } from 'vuex'
export default {
...
computed: {
// getters y state pueden mezclarse aqui para matchear sus cambios
...mapState("user", ["name"]),
...mapGetters("product", ["productsAvailable"])
},
methods: {
changeUserName(name) {
// llamando una mutation para cambiar
// el nombre del usuario
this.$store.commit('user/CHANGE_NAME', name)
}
}
mounted() {
// llamando un action para cargar los productos
this.$store.dispatch('products/fetchProducts')
}
...
}
</script>
"Las bibliotecas de flujo son como gafas: sabrá cuándo las necesita".
Dan Abramov, autor de Redux.