Vuex es el patrón de gestión de estado oficial para aplicaciones Vue.js. Actúa como un almacén centralizado para todos los componentes de una aplicación, garantizando que el estado solo pueda ser modificado de forma predecible.

Configuración e Instalación de Vuex

Para comenzar a utilizar Vuex en un proyecto de Vue 3, es necesario instalar la versión compatible con la Compostiion API:

# Usando npm
npm install vuex@next --save

# Usando yarn
yarn add vuex@next

Estructura Inicial del Store

La función createStore se utiliza para definir la instancia global del almacén. Generalmente, se configura en un archivo independiente dentro de una carpeta llamada store.

import { createStore } from 'vuex';

export default createStore({
  state: {
    currentUser: null,
    isAuth: false
  },
  getters: {
    // Definición de propiedades computadas del estado
  },
  mutations: {
    // Cambios sincrónicos de estado
  },
  actions: {
    // Operaciones asincrónicas
  },
  modules: {
    // División del store en módulos
  }
});

Para habilitar el store en la aplicación, se debe registrar en el archivo main.js:

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

Los Cinco Pilares de Vuex

1. State

Es la fuente única de verdad. Almacena los datos globales de la aplicación.

state() {
  return {
    profile: { username: 'invitado', role: 'guest' }
  }
}

2. Getters

Funcionan como propiedades computadas para el store. Permiten filtrar o calcular datos basados en el estado sin modificarlo directamente.

getters: {
  isAdmin: (state) => {
    return state.profile.role === 'admin';
  },
  checkPermission: (state) => (permissionName) => {
    // Uso de clausuras para pasar parámetros a un getter
    const permissions = ['edit_post', 'delete_post'];
    return permissions.includes(permissionName);
  }
}

3. Mutations

Es el único método permitido para alterar el estado. Deben ser funciones puramente sincrónicas.

mutations: {
  SET_USER(state, userData) {
    state.profile = userData;
  },
  CLEAR_SESSION(state) {
    state.profile = { username: 'invitado', role: 'guest' };
  }
}

4. Actions

Las acciones pueden contener lógica asincrónica (como llamadas a una API). En lugar de mutar el estado directamente, las acciones ejecutan un commit a una mutación.

actions: {
  async fetchLogin({ commit }, credentials) {
    try {
      const response = await api.login(credentials);
      commit('SET_USER', response.data);
    } catch (error) {
      console.error("Error en autenticación", error);
    }
  }
}

5. Modules

Permiten dividir el store en piezas más pequeñas para facilitar el mantenimiento en aplicaciones de gran escala.

Gestión de Cookies con vue3-cookies

Para manejar cookies de forma sencilla en Vue 3, la librería vue3-cookies es una opción robusta. No obstante, se debe considerar que no tiene acceso a cookies marcadas como HttpOnly por motivos de seguridad.

npm install vue3-cookies --save

Integración Global

import { createApp } from 'vue';
import VueCookies from 'vue3-cookies';

const app = createApp(App);
app.use(VueCookies, {
    expireTimes: "30d",
    path: "/",
    domain: "",
    secure: true,
    sameSite: "Lax"
});

Uso en Componentes

<script setup>
import { useCookies } from "vue3-cookies";

const { cookies } = useCookies();

const saveSession = (token) => {
  cookies.set("session_token", token, "1d");
};

const getSession = () => {
  return cookies.get("session_token");
};

const logout = () => {
  cookies.remove("session_token");
};
</script>

Persistencia del Estado con vuex-persistedstate

Por defecto, los datos almacenados en Vuex se pierden al recargar la página (F5). El plugin vuex-persistedstate soluciona esto sincronizando automáticamente el estado con el localStorage o sessionStorage.

npm install vuex-persistedstate --save

Configuración del Plugin

En el archivo de configuración de Vuex, se importa y añade el plugin a la instancia del store:

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

export default createStore({
  plugins: [createPersistedState({
    key: 'app_state', // Nombre de la clave en localStorage
    paths: ['currentUser', 'isAuth'] // Solo persistir estos campos específicos
  })],
  state() {
    return {
      currentUser: {},
      isAuth: false,
      temporaryData: null // Este no se persistirá
    }
  },
  mutations: {
    LOGIN_USER(state, user) {
      state.currentUser = user;
      state.isAuth = true;
    }
  }
});

Esta configuración asegura que, al iniciar la aplicación, Vuex recupere los datos guardados en el almacenamiento del navegador, manteniendo la sesión del usuario activa incluso después de cerrar la pestaña.