Vue-Statusverwaltung: Verwendung von Pinia statt Vuex

1. Was ist Pinia?

Pinia ist eine von Mitgliedern des vuex Teams entwickelte Lösung zur Zustandsverwaltung für vue . Sie implementiert viele vuex5 Vorschläge, ist leichter und bietet devtools Unterstützung.

vuex4 wurde wegen seiner mangelhaften Unterstützung für typescript kritisiert und auch bei vuex5 gibt es Verzögerungen.

So entstand Pina

Im Vergleich zu vuex:

• pinia muss keine komplexen Wrapper erstellen, um typescript zu unterstützen. Es unterstützt auf natürliche Weise typescript -Typbeurteilung, profitiert von der automatischen Vervollständigung durch die IDE, verringert die geistige Belastung der Entwicklung und reduziert die stringorientierte Programmierung im Vue-Entwicklungsprozess.
• Das Konzept der Mutationen wurde entfernt, sodass nur die Konzepte von state , getters und anctions übrig blieben, um die Code-Redundanz zu reduzieren
• Sie müssen keine Geschäfte manuell hinzufügen, die erstellten Geschäfte werden bei Verwendung automatisch hinzugefügt
• Es gibt kein Konzept von module . Sie müssen sich nicht mit vielen Modulen auseinandersetzen, die in einem Store verschachtelt sind. Verwenden Sie einen einzelnen Datei-Store (ähnlich einem Reducer in Redux/Toolkit) und Sie können andere Stores direkt zur Verwendung importieren.
  

In der Pinia-Dokumentation heißt es dazu:

Pinia versucht, so nah wie möglich an der Philosophie von Vuex zu bleiben. Die Absicht bestand darin, einen Vorschlag für die nächste Iteration von Vuex zu testen. Dies war erfolgreich, da wir derzeit über ein offenes RFC für Vuex 5 mit einer API verfügen, die der von Pinia verwendeten sehr ähnlich ist. Bitte beachten Sie, dass ich (Eduardo), der Autor von Pania, Teil des Vue.js-Kernteams bin und aktiv an der Entwicklung von APIs wie Router und Vuex beteiligt war. Meine persönliche Absicht bei diesem Projekt bestand darin, die Erfahrung bei der Verwendung eines globalen Stores neu zu gestalten und gleichzeitig die zugängliche Philosophie von Vue beizubehalten. Ich habe die API von Pania so nah wie möglich an Vuex angepasst, damit Benutzer in Zukunft problemlos zu Vuex migrieren oder die beiden Projekte (unter Vuex) sogar zusammenführen können.

Wenn Sie jetzt Pinia lernen, ist das dasselbe, als würden Sie im Voraus Vuex5 lernen.

2. Pinia ist einfach zu bedienen

Zuerst initialisieren wir ein vite+vue+ts Projekt

pnpm erstelle vite pinia-demo -- --template vue-ts

Pinia installieren

pnpm und pinia

Öffnen Sie das Projekt, bearbeiten Sie die Datei main.ts im Verzeichnis src und importieren Sie Pinia

//main.ts
​
importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
​
importiere { createPinia } von 'pinia'
​
App erstellen(App).verwenden(createPinia()).mount('#app')

Erstellen Sie einen store Ordner im src -Verzeichnis, um die Statusverwaltung zu speichern, und erstellen Sie dann eine counter.ts . Lassen Sie uns eine einfache Anwendung zum Zählerstatus erstellen

importiere { defineStore } von 'pinia'
​
exportiere const useCounterStore = defineStore('Zähler', {
  Zustand: () => {
    zurückkehren {
      Anzahl: 0,
    }
  },
  Getter: {
    doubleCount: (Staat) => Staat.Anzahl * 2,
  },
  Aktionen: {
    inkrementieren() {
      dies.zählen++
    },
  },
})

Pinia erstellt einen store über die Funktion defineStore , die eine id zur Identifizierung store und store -Optionen erhält

Wir können auch eine Callback-Funktion verwenden, um options zurückzugeben. Die Schreibmethode im Hauptteil der Callback-Funktion ähnelt setup() Methode von vue . Die obige Definition kann beispielsweise wie folgt geschrieben werden:

exportiere const useCounterStore = defineStore('counter', () => {
  Konstante Anzahl = ref(0)
  Funktion Doppelzähler() {
    gibt Zählwert * 2 zurück
  }
  Funktion Inkrement() {
    Anzahl.Wert++
  }
​
  return { Anzahl, Inkrement }
})

Als nächstes verwenden wir store in App.vue

<script setup lang="ts">
importiere { useCounterStore } von './store/counter'
const useCounter = useCounterStore()
</Skript>
​
<Vorlage>
  <h2>{{ useCounter }}</h2>
  <h2>{{ useCounter.count }}</h2>
  <h2>{{ useCounter.doubleCount() }}</h2>
  <button @click="useCounter.increment">erhöhen</button>
</Vorlage>
​
<Stil>
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

Während der Nutzung von Pinia werden Sie feststellen, dass die automatische Vervollständigung ganz ausgezeichnet ist

Der Browser läuft wie folgt:

Öffnen Sie die Entwicklertools, um vue devtool anzuzeigen

vue devtool unterstützt das Hinzufügen, Löschen, Ändern und Überprüfen Pinia -Status!

Pinia bietet mehrere Möglichkeiten, den Status zu ändern:

• Verwenden Sie actions wie oben gezeigt
• Den Status direkt ändern

const countPlus_1 = useCounter.count++

Verwenden Sie store $patch -Funktion des Stores, die sowohl Optionen als auch Rückruffunktionen unterstützt. Die Rückruffunktion eignet sich für Zustände, bei denen es sich um Arrays oder andere Zustände handelt, die den Aufruf von Zustandsmethoden zur Änderung erfordern.

const countPlus_2 = useCounter.$patch({ count: useCounter.count + 1 })

const countPlus_3 = useCounter.$patch((Zustand) => Zustand.count++)

Die Funktion StoreToRefs muss für die Statusstruktur verwendet werden

const { Anzahl } = storeToRefs(useCounter)

3. Benutzererfahrung

Pinia ist sehr benutzerfreundlich zu erlernen und zu verwenden. Sie können mit dem Lesen der offiziellen Dokumentation beginnen. Während des Vorgangs können Sie deutlich spüren, dass es schneller als vuex ist und ein hervorragendes Codierungserlebnis bietet.

Bei kleinen Projekten liegt der Schwerpunkt bei der Statusverwaltung eher auf Komfort und Geschwindigkeit (vielleicht brauchen Sie sie gar nicht), sodass Vuex etwas komplizierter ist. Als Vue3 als beta veröffentlicht wurde, sagten manche Leute, dass Sie vuex durch eine kombinierte api wie provide und inject ersetzen könnten. Daher kommt das Erscheinen von Pinia , einer leichtgewichtigen Lösung zur Statusverwaltung, gerade recht.

Dies ist das Ende dieses Artikels über die Vue-Statusverwaltung mit Pinia statt Vuex. Weitere relevante Inhalte zur Verwendung von Pinia statt Vuex finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!