jueves 18 julio 2024

Cómo utilizar Pinia en Vue

Introducción a Pinia
Instalación
Configuración de Pinia
Conclusión

Introducción a Pinia

Pinia ofrece una experiencia más simplificada y directa en comparación con Vuex. Algunas de sus ventajas incluyen:

API Simplicada: Menos configuración y menos código boilerplate.
Soporte Nativo para Composition API: Integración directa con la nueva API de composición de Vue 3.
Soporte para TypeScript: Mejor soporte y tipado.

Instalación

Para empezar a usar Pinia en tu proyecto Vue, primero necesitas instalarla. Si ya tienes un proyecto Vue 3, puedes añadir Pinia usando npm o yarn:

npm install pinia

yarn add pinia

Configuración de Pinia

Configuración en tu Proyecto Vue

Primero, debes crear una instancia de Pinia y añadirla a tu aplicación Vue. Edita tu archivo main.js o main.ts:

// main.js
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

En Pinia, un store es un lugar donde almacenas el estado de tu aplicación, similar a un módulo en Vuex. Vamos a crear un store simple. Crea un directorio llamado stores y dentro de él, un archivo llamado counter.js:

// stores/counter.js
import { defineStore } from 'pinia';

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

Uso del Store en Componentes

Ahora que tenemos nuestro store definido, podemos utilizarlo en nuestros componentes Vue. Vamos a crear un componente que interactúe con nuestro store:

<!-- CounterComponent.vue -->
<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useCounterStore } from './stores/counter';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement
    };
  }
});
</script>

Reactividad y Computed Properties

Pinia maneja la reactividad de manera similar a la Composition API de Vue. Puedes usar computed para crear propiedades derivadas del estado:

// stores/counter.js
import { defineStore } from 'pinia';
import { computed } from 'vue';

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

Luego puedes acceder a estas propiedades en tus componentes:

<!-- CounterComponent.vue -->
<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <h2>Double Count: {{ doubleCount }}</h2>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useCounterStore } from './stores/counter';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.count,
      doubleCount: counterStore.doubleCount,
      increment: counterStore.increment,
      decrement: counterStore.decrement
    };
  }
});
</script>

Uso con TypeScript

Pinia está diseñado para trabajar bien con TypeScript. Aquí hay un ejemplo de cómo definir un store con tipado:

// stores/counter.ts
import { defineStore } from 'pinia';

interface CounterState {
  count: number;
}

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

Conclusión

Pinia es una excelente opción para la gestión de estado en aplicaciones Vue, especialmente si estás usando Vue 3 y Composition API. Su API simplificada y su integración nativa con TypeScript la convierten en una opción atractiva para desarrolladores modernos. Esta guía te ha mostrado cómo configurar y usar Pinia en tu proyecto Vue, desde la instalación hasta la creación y uso de stores.

Etiquetas:

pinia vue javascript desarrollo web

Creado por:

Jorge García

Fullstack developer