Introducción a Vuex y su Arquitectura

Vuex se define como un patrón de gestión de estado diseñado específicamente para ecosistemas Vue.js. Su función principal es actuar como un almacén centralizado que regula el estado de todos los componentes dentro de una aplicación, asegurando que las modificaciones sigan reglas estrictas para predecir el comportamiento del datos. Además, se integra nativamente con las herramientas de desarrollo de Vue, permitiendo funcionalidades avanzadas como viajes en el tiempo (time-travel debugging) y snapshots del estado.

El Patrón de Gestión de Estado

Para comprender la necesidad de Vuex, analicemos una aplicación Vue básica que maneja un contador. Esta estructura minimalista consta de tres elementos clave:

• Estado (State): La fuente única de verdad que impulsa la aplicación.
• Vista (View): La representación declarativa que mapea el estado en el DOM.
• Acciones (Actions): Los métodos que responden a interacciones del usuario para modificar el estado.

A continuación se muestra una implementación básica sin gestión de estado externa:

new Vue({
  data () {
    return {
      nivel: 0
    }
  },
  template: `
    <div>Nivel actual: {{ nivel }}</div>
  `,
  methods: {
    subirNivel () {
      this.nivel++
    }
  }
})

Este flujo unidireccional es sencillo cuando el estado es local. Sin embargo, la complejidad aumenta cuando múltiples componentes necesitan acceder o modificar la misma información.

Desafíos en la Compartición de Estado

La simplicidad del flujo unidireccional se rompe en escenarios comunes:

1. Varios componentes dependen de la misma fuente de datos.
2. Diferentes interacciones en distintos componentes requieren actualizar ese mismo dato.

Intentar solucionar esto pasando propiedades (props) a través de múltiples niveles de componentes es tedioso y difícil de mantener. Alternativamente, usar eventos entre componentes hermanos o referencias directas crea acoplamiento fuerte y código frágil. Vuex resuelve esto extrayendo el estado compartido a un almacén global (singleton), permitiendo que cualquier componente en el árbol acceda o dispare cambios de manera controlada.

Criterios para Implementar Vuex

Aunque Vuex ofrece orden, introduce boilerplate y conceptos adicionales. Su uso debe justificarse según la escala del proyecto:

• Aplicaciones Pequeñas: Si la app es simple, un bus de eventos global o el estado local es suficiente. Vuex puede ser excesivo.
• Aplicaciones Medianas/Grandes: En Single Page Applications (SPA) complejas, la gestión externa del estado se vuelve necesaria para mantener la escalabilidad y el debuggeo.

Diferencias Clave con Variables Globales

El núcleo de Vuex es el store. Aunque parece un objeto global simple, posee dos distinciones fundamentales:

1. Reactividad: El estado dentro del store es reactivo. Si un componente lee un valor del store y este cambia, el componente se actualiza automáticamente.
2. Mutaciones Explícitas: No se puede modificar el estado directamente. El único modo es committing una mutation. Esto permite rastrear cada cambio, facilitando el logging y las herramientas de debug.

Creación de un Store Básico

La inicialización requiere definir el estado inicial y las mutaciones permitidas. A diferencia de modificar variables directamente, se invoca un commit:

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

Vue.use(Vuex)

const almacen = new Vuex.Store({
  state: {
    nivel: 0
  },
  mutations: {
    AUMENTAR_NIVEL (estado) {
      estado.nivel++
    }
  }
})

// Uso externo para demostración
almacen.commit('AUMENTAR_NIVEL')
console.log(almacen.state.nivel) // Resultado: 1

Esta restricción de usar commit hace que el flujo de datos sea explícito y trazable en los registros de la aplicación.

Integración en Proyectos Vue

Para utilizar Vuex, primero debe instalarse como dependencia o importarse vía CDN. A continuación se presentan dos enfoques de implementación.

Enfoque 1: Proyecto Vue CLI (Archivos .vue)

En un entorno modular, se separa la lógica del store en un archivo dedicado.

1. Configuración del Store (store.js)

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    nivel: 0
  },
  getters: {
    nivelConTexto: estado => `Nivel: ${estado.nivel}`
  },
  mutations: {
    SUBIR (estado) {
      estado.nivel++
    },
    BAJAR (estado) {
      estado.nivel--
    }
  },
  actions: {
    elevar: ({ commit }) => commit('SUBIR'),
    reducir: ({ commit }) => commit('BAJAR')
  }
})

2. Inyección en la instancia principal (main.js)

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

3. Componente de Control (PanelControl.vue)

Este componente dispara las acciones para modificar el estado.

<template>
  <div class="panel">
    <h3>Controles</h3>
    <button @click="elevar">Subir</button>
    <button @click="reducir">Bajar</button>
  </div>
</template>

<script>
export default {
  name: 'PanelControl',
  methods: {
    elevar () {
      this.$store.dispatch('elevar')
    },
    reducir () {
      this.$store.dispatch('reducir')
    }
  }
}
</script>

4. Componente de Visualización (VisorEstado.vue)

Este componente lee el estado y los getters computados.

<template>
  <div class="visor">
    <p>{{ nivelConTexto }}</p>
    <p>Valor crudo: {{ nivel }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'VisorEstado',
  computed: {
    ...mapState(['nivel']),
    ...mapGetters(['nivelConTexto'])
  }
}
</script>

Enfoque 2: Implementación en Archivo JS Plano

Para entornos sin build steps, se puede utilizar Vuex directamente en el navegador cargando los scripts necesarios.

<html>
<head>
  <meta charset="UTF-8">
  <title>Demo Vuex Simple</title>
</head>
<body>
  <div id="app">
    <p>Contador: {{ nivel }}</p>
    <button @click="sumar">+</button>
    <button @click="restar">-</button>
  </div>

  <script src="vue.js"></script>
  <script src="vuex.js"></script>
  <script>
    const store = new Vuex.Store({
      state: {
        nivel: 0
      },
      mutations: {
        sumar: (estado) => estado.nivel++,
        restar: (estado) => estado.nivel--
      }
    })

    new Vue({
      el: '#app',
      store,
      computed: {
        nivel () {
          return this.$store.state.nivel
        }
      },
      methods: {
        sumar () {
          this.$store.commit('sumar')
        },
        restar () {
          this.$store.commit('restar')
        }
      }
    })
  </script>
</body>
</html>