Vuex es una biblioteca de gestión de estado para aplicaciones Vue.js. Proporciona un almacén centralizado para todos los componentes de una aplicación, con reglas que aseguran que el estado solo puede ser mutado de manera predecible. Vuex se integra perfectamente con Vue.js y es una herramienta esencial para manejar el estado en aplicaciones Vue de tamaño medio a grande.

En aplicaciones pequeñas, el manejo del estado puede ser sencillo y directo. Sin embargo, a medida que la aplicación crece, la gestión del estado puede volverse compleja y difícil de mantener. Vuex ayuda a resolver estos problemas proporcionando:

• Un único punto de verdad: Todo el estado de la aplicación se almacena en un único lugar.
• Manejo predecible del estado: Las mutaciones son la única forma de cambiar el estado, y son funciones síncronas.
• Depuración fácil: Gracias a las herramientas de desarrollo de Vue y Vuex, es fácil rastrear y depurar cambios en el estado.

El estado es el objeto que contiene los datos de la aplicación. En Vuex, el estado se almacena en un objeto centralizado que puede ser accedido por cualquier componente.

Los getters son funciones que obtienen y procesan el estado. Son similares a las propiedades computadas en Vue.

Las mutaciones son la única forma de cambiar el estado en Vuex. Son funciones síncronas que reciben el estado actual y un payload (carga útil).

Las acciones son funciones que pueden contener operaciones asíncronas. En lugar de mutar el estado directamente, las acciones cometen mutaciones.

Vamos a crear un ejemplo práctico para entender cómo funciona Vuex en una aplicación Vue.

1. Instalación de Vuex:

   npm install vuex --save
   

2. Configuración del Store:

   // store.js
   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment(state) {
         state.count++;
       }
     },
     actions: {
       incrementAsync({ commit }) {
         setTimeout(() => {
           commit('increment');
         }, 1000);
       }
     },
     getters: {
       doubleCount: state => state.count * 2
     }
   });
   

3. Integración del Store en la Aplicación:

   // main.js
   import Vue from 'vue';
   import App from './App.vue';
   import store from './store';
   
   new Vue({
     store,
     render: h => h(App)
   }).$mount('#app');
   

4. Uso del Store en un Componente:

   // App.vue
   <template>
     <div>
       <p>{{ count }}</p>
       <p>{{ doubleCount }}</p>
       <button @click="increment">Increment</button>
       <button @click="incrementAsync">Increment Async</button>
     </div>
   </template>
   
   <script>
   import { mapState, mapGetters, mapActions } from 'vuex';
   
   export default {
     computed: {
       ...mapState(['count']),
       ...mapGetters(['doubleCount'])
     },
     methods: {
       ...mapActions(['incrementAsync']),
       increment() {
         this.$store.commit('increment');
       }
     }
   };
   </script>
   

1. Crea una nueva aplicación Vue y configura Vuex.
2. Define un estado inicial con una propiedad message que contenga un string.
3. Crea una mutación para actualizar el message.
4. Crea una acción que actualice el message después de 2 segundos.
5. Usa el estado y la acción en un componente Vue.

1. Configuración del Store:

   // store.js
   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
     state: {
       message: 'Hello Vuex'
     },
     mutations: {
       updateMessage(state, newMessage) {
         state.message = newMessage;
       }
     },
     actions: {
       updateMessageAsync({ commit }, newMessage) {
         setTimeout(() => {
           commit('updateMessage', newMessage);
         }, 2000);
       }
     }
   });
   

2. Integración del Store en la Aplicación:

   // main.js
   import Vue from 'vue';
   import App from './App.vue';
   import store from './store';
   
   new Vue({
     store,
     render: h => h(App)
   }).$mount('#app');
   

3. Uso del Store en un Componente:

   // App.vue
   <template>
     <div>
       <p>{{ message }}</p>
       <button @click="updateMessageAsync('Hello from Vuex!')">Update Message</button>
     </div>
   </template>
   
   <script>
   import { mapState, mapActions } from 'vuex';
   
   export default {
     computed: {
       ...mapState(['message'])
     },
     methods: {
       ...mapActions(['updateMessageAsync'])
     }
   };
   </script>
   

En esta lección, hemos aprendido los conceptos básicos de Vuex, incluyendo el estado, getters, mutaciones y acciones. También hemos visto cómo integrar Vuex en una aplicación Vue y cómo usar el store en un componente. En el próximo módulo, profundizaremos en el uso de Vuex en componentes y exploraremos patrones avanzados de gestión de estado.