Vue Academy · Lección

Fundamentos de Vuex

Comprenda el store de Vuex y el estado centralizado

Fundamentos de Vuex es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

¿Por qué centralizar el estado?

A medida que crecen las aplicaciones Vue, compartir datos entre muchos componentes se vuelve complicado. Pasar props hacia abajo y emitir eventos hacia arriba a través de árboles profundamente anidados es frágil. Vuex resuelve este problema con un único store centralizado del que cualquier componente puede leer y en el que puede escribir de forma predecible.

La única fuente de verdad

Vuex sigue un flujo de datos unidireccional. Todo el estado compartido de la aplicación reside en un único lugar llamado store. Los componentes leen el estado del store y solicitan cambios mediante una API controlada, por lo que siempre sabrá de dónde proceden los datos y cómo cambian.

Instalar Vuex

Vuex 4 es la versión creada para Vue 3. Instálelo con su gestor de paquetes y, después, cree y registre el store en su aplicación.

npm install vuex@4

Crear el store

Use createStore para definir un store. La opción state es una función que devuelve el objeto de estado reactivo inicial.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

Registrar el store

Pase el store a su aplicación con app.use(store). Esto lo hace disponible para todos los componentes mediante this.$store.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

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

La propiedad state

El objeto state contiene los datos de su aplicación. Es reactivo: cuando cambia el estado, cualquier componente que lo utilice vuelve a renderizarse automáticamente. Piense en él como el data() de toda su aplicación.

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

Acceder al estado en la Options API

Dentro de un componente, acceda al store mediante this.$store.state. Una propiedad computed mantiene el valor reactivo.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

Usar el estado en la plantilla

Una vez expuesto mediante una propiedad computed, el estado se utiliza como cualquier valor local en la plantilla.

<template>
  <p>Current count: {{ count }}</p>
</template>

El helper mapState

Escribir muchas propiedades computed manualmente resulta repetitivo. El helper mapState las genera a partir de un array de nombres de estado.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

mapState con renombrado

Pase un objeto a mapState para cambiar el nombre de las propiedades o calcular valores derivados del estado.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

Acceder al estado en la Composition API

Con la Composition API, llame a useStore() dentro de setup para obtener la instancia del store y, después, lea el estado mediante una propiedad computed.

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

Comprobación rápida

Compruebe su comprensión de los fundamentos de Vuex.

Resumen

Vuex proporciona un store centralizado y reactivo como única fuente de verdad. Puede crearlo con createStore, registrarlo mediante app.use y leer el state a través de propiedades computed o del helper mapState. En la Composition API, acceda al store con useStore(). A continuación, aprenderá a cambiar ese estado de forma segura.

Preguntas frecuentes

¿La lección «Fundamentos de Vuex» es gratis?

Sí — el texto completo de «Fundamentos de Vuex» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Fundamentos de Vuex»?

Comprenda el store de Vuex y el estado centralizado Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «Fundamentos de Vuex»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy