Instalación de Vuex con estado único

Centraliza datos, depura con confianza y conecta componentes sin fricción: con estado único, un store y map state, Viewx integra la arquitectura FLUX para que todos los componentes lean la misma fuente de verdad. Aquí verás cómo crear el store, leer el state con computed, usar map state y combinarlo con spread operator.

¿Qué es el estado único y por qué importa?

Tener un origen único de estado significa que toda la información compartida vive en un árbol único de estado dentro del store. Así, cada componente accede a los mismos valores y actualizaciones en tiempo real.

• Facilita localizar información: todo está centralizado en el store.
• Mejora la depuración: las DevTools permiten navegar hacia atrás y adelante entre estados.
• Escala con modularización: Viewx recomienda dividir el estado en módulos en proyectos grandes.
• Arquitectura coherente: se integra naturalmente con FLUX.

¿Cómo se configura el store como origen de la verdad?

El store define el state y las primeras mutations para cambiarlo de forma predecible. Tras instalar Viewx (se menciona versión 2.3.1), se crea un archivo store.js y se registra como plugin.

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

export default new Vuex.Store({
  state,
  mutations
})

¿Cómo se conecta el store en main.js?

Se importa y se inyecta en la instancia raíz para que todos los componentes hijos accedan al mismo estado.

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

new Vue({
  store, // plugin: origen único de datos para toda la app
  render: h => h(App)
}).$mount('#app')

¿Cómo leer el estado con computed y map state?

La forma más directa de leer el estado en un componente es una computed property que use this.$store.state. Así, cuando el state cambie, la computed se recalcula.

<!-- App.vue (extracto) -->
<template>
  <div>
    <h2>contador</h2>
    <p>{{ count }}</p>
    <div>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

Para mapear varias propiedades sin escribir computed una por una, Viewx ofrece la función map state de los ES modules.

// App.vue (script)
import { mapState } from 'vuex'

export default {
  computed: mapState(['count'])
}

¿Qué errores comunes aparecen y cómo diagnosticarlos?

• “is not defined” al importar: revisar mayúsculas/minúsculas en nombres y alias de módulos.
• “Unexpected token” al usar map state: ocurre si se mezcla objeto y función en computed. Solución: reemplazar todo el objeto computed por mapState o combinar correctamente con spread operator.
• Comas y sintaxis: un coma faltante tras data puede romper la compilación; ESLint ayuda a prevenirlo.
• Confirmación visual: en DevTools se ve el binding de count al store.

¿Cómo combinar computed con map state usando spread operator?

Cuando necesitas tus propias computed properties más las del store, usa el spread operator para objetos (...). Así puedes mezclar lo mapeado con map state y tus computed personalizadas.

• El spread operator “expande” propiedades dentro de un nuevo objeto.
• Se relaciona con destructuring: extraes algunas claves y “el resto” queda agrupado.
• Requiere soporte de Babel con un preset avanzado.

Instalación y configuración de Babel para habilitarlo:

npm i -D babel-preset-stage-2

// .babelrc
{
  "presets": [
    "stage-2"
  ]
}

Nota: reinicia la compilación de webpack para que tome el cambio de Babel.

Ejemplo combinando map state con computed propias:

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return { test: 'resultado test' }
  },
  computed: {
    ...mapState(['count']),
    stringTest() {
      return this.test
    }
  }
}
</script>

De esta forma, count proviene del store y stringTest es lógica local del componente. Los botones increment/decrement quedan listos para conectarse a mutations.

¿Tienes dudas sobre state, store, map state o spread operator? Deja un comentario con tu caso y lo revisamos juntos.