0Pricing
Vue Academy · Lección

defineStore: estado, getters y actions

Store de opciones frente a store de Setup, estado como función, getters computados y actions asíncronas

defineStore: estado, getters y actions es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. 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 4 lecciones en total.

Los tres pilares de un store

Un store de opciones tiene tres partes: state (los datos), getters (valores derivados) y actions (métodos que cambian el state). Las tres se definen dentro de defineStore.

Definir un store

defineStore recibe una cadena id única y un objeto de opciones. Devuelve un composable que, por convención, se denomina useXxxStore.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

El state es una función

La opción state debe ser una función que devuelva un objeto. Esto garantiza que cada instancia del store obtenga un state nuevo, igual que data() en los componentes.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

Leer el state

Llame al composable del store dentro de setup para obtener una instancia y, después, lea directamente sus propiedades de state. Son reactivas.

const counter = useCounterStore()
console.log(counter.count) // 0

Los getters son valores computed

Los getters son como las propiedades computed. Cada uno recibe el state como primer argumento y devuelve un valor derivado. Sus resultados se almacenan en caché.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Usar un getter

Acceda a un getter como si fuera una propiedad, sin paréntesis. Pinia lo vuelve a calcular solo cuando cambian sus dependencias.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Getters que hacen referencia a otros getters

Para usar otro getter, haga referencia a this en lugar del parámetro state. Cuando use this, no utilice una función flecha.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Las actions cambian el state

Las actions son métodos. Utilizan this para leer y modificar directamente el state. No hay commit ni dispatch: solo tiene que llamar al método.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

Actions asíncronas

Las actions pueden ser async. Este es el lugar adecuado para las llamadas a la API: obtenga los datos y después asigne el resultado al state.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Usar el store en un componente

Importe el composable, llámelo en <script setup> y use el state, los getters y las actions en la plantilla.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Aplicar parches a varios campos

Para cambiar varios campos del state a la vez, use $patch. Agrupa los cambios en una sola entrada de Devtools.

counter.$patch({ count: 10, name: 'New' })

Comprobación rápida

Compruebe sus conocimientos sobre la estructura de un store de opciones.

Recapitulación

Un store de opciones tiene tres partes:

  • state: una función que devuelve el objeto de datos.
  • getters: valores derivados almacenados en caché que reciben el state (o usan this).
  • actions: métodos que modifican directamente el state mediante this.

Use el store llamando a su composable dentro de setup.

Preguntas frecuentes

¿La lección «defineStore: estado, getters y actions» es gratis?

Sí — el texto completo de «defineStore: estado, getters y actions» 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 4 lecciones en total.

¿Qué aprenderé en «defineStore: estado, getters y actions»?

Store de opciones frente a store de Setup, estado como función, getters computados y actions asíncronas 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 2 de 4.

¿Cuánto tiempo toma la lección «defineStore: estado, getters y actions»?

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

  1. Pinia frente a Vuex: por qué cambiar
  2. defineStore: estado, getters y actions
  3. Composición de stores y acceso entre stores
  4. Persistencia y devtools de Pinia
← Volver a Vue Academy