Vuejs: Gestión de estado

La gestión del estado en una aplicación Vue 3.5 puede ser compleja, especialmente en aplicaciones de gran tamaño. Pinia es una herramienta diseñada para simplificar este proceso, proporcionando una API intuitiva y eficiente. En esta guía, exploraremos cómo utilizar Pinia para gestionar el estado en una aplicación Vue 3.5.

Instalación de Pinia

Para comenzar a utilizar Pinia en tu proyecto Vue 3.5, primero debes instalarlo. Utiliza el siguiente comando:

npm install pinia

Una vez instalado, configura Pinia en tu aplicación Vue 3.5. Abre el archivo principal de tu proyecto (generalmente main.js o main.ts) y añade la configuración de Pinia:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

Creación de un store

Un store en Pinia es una entidad que contiene el estado, las acciones y los getters. Para crear un store, sigue estos pasos:

1. Crea un archivo para tu store, por ejemplo, src/stores/counter.js.
2. Define el store utilizando la función defineStore.

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

Uso del store en componentes

Para utilizar el store en un componente Vue 3.5, importa el store y accede a sus propiedades y métodos. Aquí tienes un ejemplo de cómo hacerlo:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();
const { count, doubleCount, increment, decrement } = counterStore;
</script>

En este ejemplo, hemos importado el store useCounterStore, y luego hemos accedido a sus propiedades y métodos dentro del componente.

Persistencia del estado

Para mantener el estado persistente entre recargas de página, puedes usar plugins como pinia-plugin-persistedstate. Instálalo con el siguiente comando:

npm install pinia-plugin-persistedstate

Luego, configúralo en tu aplicación:

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

app.use(pinia);

Mejores prácticas

• Modularidad: Divide tu estado en múltiples stores pequeños en lugar de uno grande.
• Tipado: Utiliza TypeScript para añadir tipado estático a tus stores.
• Acciones: Usa acciones para cualquier lógica de negocio compleja en lugar de mutar directamente el estado.

Con estas prácticas, podrás gestionar el estado de tu aplicación Vue 3.5 de manera eficiente utilizando Pinia.