Auf Wiedersehen Vuex, Hallo Pinia

Erinnern Sie sich noch an den Kampf mit Vuex? Endlose Mutationen, seltsame commit und dispatch Syntax, und TypeScript-Typen, die zum echten Albtraum wurden. Es scheint, als hätte das Vue-Team unsere Gebete erhört und Pinia veröffentlicht. Das ist nicht nur eine weitere State-Management-Bibliothek, sondern der offizielle Nachfolger von Vuex, der das Leben eines Frontend-Entwicklers erheblich verbessert.

Übrigens, der Name ist ein nettes Wortspiel. Pinia klingt wie das spanische Wort „piña" (Ananas). Die Entwickler vergleichen einen Store mit einer Ananas: Es ist eine Gruppe einzelner Blüten, die zusammen eine einzelne Frucht bilden. Jeder Store in Ihrer Anwendung entsteht für sich allein, aber am Ende arbeiten sie als ein Team.

Was es ist und warum Sie es brauchen

Kurz gesagt: Pinia ist ein leichtgewichtiger Store für Vue, der die Composition API vollständig unterstützt. Er wiegt nur etwa 1 KB, unterstützt Hot Module Reloading und funktioniert hervorragend mit DevTools.

Der Hauptunterschied zum alten Ansatz ist das Fehlen von Mutationen. Jetzt können Sie den State direkt in Actions ändern, was den Boilerplate-Code erheblich reduziert. Wenn Sie mit Vue 3 arbeiten, ist Pinia der De-facto-Standard. Für diejenigen, die noch bei Vue 2 sind, gibt es Abwärtskompatibilität, sodass die Migration kein Desaster wird.

Warum Entwickler diesen Store wählen

Ich habe mehrere Punkte identifiziert, die den Workflow wirklich verändern.

TypeScript-Support von Haus aus

Bei Vuex fühlte sich das Tippen oft wie das Benutzen von Krücken an. Bei Pinia ist alles anders. Es ist in TypeScript geschrieben, sodass die Autovervollständigung perfekt funktioniert. Sie müssen nicht manuell Interfaces für jeden Getter oder jede Action beschreiben – die Bibliothek erkennt selbst, was Sie zurückgeben.

Modularität ohne zusätzliche Komplexität

Vergessen Sie verschachtelte Module und komplexe Pfade dorthin. Bei Pinia erstellen Sie einfach verschiedene Stores in verschiedenen Dateien und importieren sie dort, wo sie gebraucht werden. Das macht die Architektur sauberer: Jede Komponente nimmt nur die Daten, die sie tatsächlich benötigt.

import { defineStore } from 'pinia'

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

Einfache Integration

Sie können die Bibliothek mit nur wenigen Codezeilen einbinden. Es ist schön, dass sie hervorragend mit Nuxt funktioniert und Server-Side Rendering (SSR) unterstützt.

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

Wie es in der Praxis funktioniert

Stellen Sie sich vor, Sie haben einen Warenkorb in einem Online-Shop. Früher mussten Sie ein Modul registrieren, die Pfadbenennung im Auge behalten und Actions schreiben, die Mutationen aufrufen. Mit Pinia rufen Sie die Store-Methode in einer Komponente einfach wie eine normale Funktion auf.

Zum Abrufen von Daten ohne Reaktivität zu verlieren, gibt es den praktischen storeToRefs Helfer. Das rettet Sie, wenn Sie einen Store destrukturieren müssen, ohne seine Verbindung zum State zu brechen.

import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'

const cart = useCartStore()
const { items, total } = storeToRefs(cart)

Lohnt sich der Umstieg?

Wenn Sie ein neues Vue 3-Projekt starten, gibt es praktisch keine Alternativen zu Pinia. Es ist einfacher, schneller und moderner. Wenn Sie ein altes Vuex-Projekt haben, müssen Sie sich nicht beeilen, aber für neue Features würde ich diesen Ansatz empfehlen.

Das Projekt wird aktiv von Eduardo San Martin Morote (posva) gepflegt, der zum Vue Core-Team gehört. Das gibt Vertrauen, dass die Bibliothek nicht in einem Monat verschwindet. Außerdem hat Pinia eine ausgezeichnete Dokumentation und eine lebendige Community.

Sie können das Projekt in Aktion auf StackBlitz ausprobieren:

• Demo mit Vue 3
• Demo mit Nuxt 3

Für wen es definitiv geeignet ist:

1. Diejenigen, die Vuex-Umständlichkeit leid sind.
2. TypeScript-Fans, die qualitative Autovervollständigung schätzen.
3. Nuxt 3-Entwickler, wo Pinia die empfohlene Lösung ist.

Vielleicht der einzige Nachteil – wenn Sie die starre Struktur von Vuex mit obligatorischen Mutationen gewohnt sind, könnte Pinias Freiheit zunächst seltsam erscheinen. Aber an gute Dinge gewöhnt man sich schnell.