Vuex es una solución de gestión de estado para Vue.js que facilita el intercambio de datos entre componentes independientes. Cuando un componente modifica datos compartidos, otros componentes que utilizan esos mismos datos se actualizan de manera reactiva. No obstante, al recargar la página, cualquier estado almacenado en Vuex se restablece a su valor inicial, por lo que es común emplear almacenamiento local para persistencia.

El uso de Vuex resulta esencial en aplicaciones donde múltiples vistas dependen del mismo conjunto de datos, o cuando distintas acciones necesitan alterar un estado común. Las características principales incluyen:

• El almacenamiento de estado es raectivo: los componentes que leen del almacén se actualizan automáticamente cuando el estado cambia.
• No se permite modificar el estado directamente; todos los cambios deben realizarse mediante mutaciones explícitas, lo que facilita el seguimiento de las actualizaciones.

Instalación de Vuex

npm install vuex --save

Configuración del Almacén Global

Se crea un archivo dedicado para el almacén, por ejemplo en /src/store/index.js. En el siguiente ejemplo, se utiliza localStorage para retener datos entre sesiones:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        datosUsuario: JSON.parse(localStorage.getItem('user')) || null
    },
    mutations: {
        actualizarUsuario(state, payload) {
            localStorage.setItem('user', JSON.stringify(payload));
            state.datosUsuario = payload;
        }
    },
    getters: {
        obtenerUsuario(state) {
            return state.datosUsuario || JSON.parse(localStorage.getItem('user'));
        }
    }
});

Integración Global del Almacén

Para hacer el almacén accesible en toda la aplicación, se puede asignar al prototipo de Vue o instanciar directamente en la raíz de la app:

import store from './store';

// Método 1: Inyección mediante prototipo
Vue.prototype.$almacen = store;

// Método 2: Inyección en la instancia Vue
new Vue({
    el: '#app',
    store,
    render: h => h(App)
});

Uso Práctico

Para actualizar el estado desde un componente, se ejecuta una mutación:

this.$almacen.commit('actualizarUsuario', { nombre: 'Ejemplo', id: 123 });

Para acceder al estado, se pueden usar los getters directamente o mediante la función auxiliar mapGetters:

<script>
import { mapGetters } from 'vuex';

export default {
    computed: {
        ...mapGetters({
            perfilUsuario: 'obtenerUsuario'
        }),
        usuarioActual() {
            return this.$almacen.getters.obtenerUsuario();
        }
    }
};
</script>

Uso de Obtainedores vs. Estado Directo

Una pregunta frecuente es por qué utilizar obtenedores en lugar de acceder directamente al estado. Los obtenedores actúan como propiedades computadas para el almacén: permiten transformar, filtrar o combinar datos del estado de manera reutilizable. Por ejemplo, si múltiples componentes necesitan mostrar una fecha formateada o calcular un valor derivado de varios campos del estado, un obtenedor encapsula esa lógica para evitar duplicación.

En resumen: el estado centraliza los datos sin procesar, mientras que los obtenedores proporcionan vistas derivadas y optimizadas de esos datos, similar al papel de computed en los componentes Vue.