Hinweise zu Fallstricken bei Vuex und Pinia in Vue3

einführen

Pinia ist eine leichtgewichtige Statusverwaltungsbibliothek für Vue.js, die in letzter Zeit sehr populär geworden ist. Es verwendet das neue Reaktivitätssystem in Vue 3, um eine intuitive und vollständig typisierte Statusverwaltungsbibliothek zu erstellen.

Der Erfolg von Pinia ist auf seine einzigartigen Funktionen zur Verwaltung gespeicherter Daten zurückzuführen (Skalierbarkeit, Organisation von Speichermodulen, Gruppierung von Statusänderungen, Erstellung mehrerer Geschäfte usw.).

Andererseits ist Vuex auch eine beliebte, für das Vue-Framework erstellte Bibliothek zur Zustandsverwaltung und auch die vom Vue-Kernteam empfohlene Bibliothek zur Zustandsverwaltung. Vuex legt großen Wert auf Anwendungsskalierbarkeit, Entwicklerergonomie und Vertrauen. Es basiert auf der gleichen Flow-Architektur wie Redux.

Installation und Verwendung

Installieren Sie vuex

npm installiere vuex@next --save

cnpm installiere vuex@next --speichern-

Garn hinzufügen vuex@next --speichern

Pinia installieren

npm installiere pinia@next

cnpm installiere pinia@next

Garn hinzufügen pinia@next

Nach der Installation verwenden Sie es einfach gemäß der folgenden Schreibmethode. Solange Sie vuex verwenden können, können Sie die grundlegende Verwendung von Pinia verwenden. Die Schreibmethode des Pinia-Plugins wird hier nicht angezeigt.

Einfacher Vergleich von Schreibunterschieden und -ähnlichkeiten

Vuex und Pinia werden von denselben Teammitgliedern geschrieben, aber Pinia ist benutzerfreundlicher und einfacher.

So schreiben und verwenden Sie Vuex in Vue3

//store.js
importiere { createStore } von 'vuex'

exportiere Standard createStore({
    // Datenstatus definieren: { a:1 },
    // Methode Mutationen definieren: {
        xxx(Staat,Nummer){
            state.a = Nummer
        }
    },
    // Asynchrone Methodenaktionen: { },
    // Datengetter abrufen: { getA:state=>return state.a }
})

// Verwenden von <template> in vue3
    <div>
        {{Nummer}}
        <button @click="clickHandle">Schaltfläche</button>
    </div>
</Vorlage>
<Skript>
importiere {useStore} von "vuex"
Standard exportieren {
    aufstellen(){
        lass speichern = useStore()
        // ⭐⭐⭐ Wenn Sie den Statuswert direkt abrufen, müssen Sie „computed“ verwenden, um eine Datenreaktion zu erreichen. Wenn Sie „store.state.a“ direkt abrufen, überwachen Sie keine Datenänderungen. Oder verwenden Sie „getter“, Sie müssen „computed“ nicht verwenden
        lass Zahl = berechnet(()=>store.state.a)
        const KlickHandle = () => {
            speichern.commit("xxx","100")
        }
        return{Nummer,KlickHandle}
    }
}
<Skript>

So schreiben und verwenden Sie Pinia in Vue3

//store.js
importiere { defineStore } von 'pinia'

// defineStore gibt nach dem Aufruf eine Funktion zurück. Rufen Sie diese Funktion auf, um die Store-Entität zu erhalten. Export const GlobalStore = defineStore({
  // ID: erforderlich, eindeutig unter allen Stores ID: "myGlobalState",
  // Status: Funktion, die den Status eines Objekts zurückgibt: () => ({
    ein: 1,
  }),
  Getter: {},
  Aktionen: {
    setXXX(Zahl) {
      dies.a = Zahl;
    },
  },
});

// Verwenden von <template> in vue3
    <div>
        {{Nummer}}
        <button @click="clickHandle">Schaltfläche</button>
    </div>
</Vorlage>
<Skript>
importiere {GlobalStore} aus "@/store/store.js"
Standard exportieren {
    aufstellen(){
        let store = GlobalStore();
        // ⭐⭐⭐ Wenn Sie den Statuswert direkt abrufen, müssen Sie „computed“ verwenden, um eine Datenreaktion zu erreichen. Wenn Sie „store.state.a“ direkt abrufen, überwachen Sie keine Datenänderungen. Oder verwenden Sie „getter“, Sie müssen „computed“ nicht verwenden (das ist dasselbe wie vuex)
        lass Zahl = berechnet(()=>store.a)
        const KlickHandle = () => {
            store.setXXX("100")
        }
        return{Nummer,KlickHandle}
    }
}
<Skript>

Aus dem Vergleich dieser beiden Codes können wir erkennen, dass die Verwendung von Pinia prägnanter und leichter ist. pinia bricht die ursprünglichen Mutationen ab und fügt sie zu Aktionen zusammen. Wenn wir einen Wert abrufen, können wir direkt auf den Wert klicken, ohne .state zu verwenden. Dasselbe gilt für Methoden.

Vor- und Nachteile von Vuex und Pinia

Vorteile von Vuex

• Unterstützt Debugging-Funktionen wie Zeitreisen und Bearbeiten
• Geeignet für große, komplexe Vue.js-Projekte

Nachteile von Vuex

• Ab Vue 3 werden Getter-Ergebnisse nicht wie berechnete Eigenschaften zwischengespeichert
• Vuex 4 hat einige Probleme im Zusammenhang mit der Typsicherheit

Vorteile von Pinia

• Vollständige TypeScript-Unterstützung: Es ist einfacher, TypeScript hinzuzufügen, als es in Vuex hinzuzufügen
• Extrem leicht (ca. 1 KB)
• Store-Aktionen werden als reguläre Funktionsaufrufe versendet, anstatt die Dispatch-Methode oder den MapAction-Helfer zu verwenden, was in Vuex üblich ist.
• Unterstützt mehrere Geschäfte
• Unterstützt Vue Devtools, SSR und Webpack-Code-Splitting

Nachteile von Pinia

• Unterstützt keine Debugging-Funktionen wie Zeitreisen und Bearbeiten

Wann sollte Pinia und wann Vuex verwendet werden?

Meiner persönlichen Erfahrung nach ist Pinea aufgrund seines geringen Gewichts und seiner geringen Größe für kleine bis mittlere Anwendungen geeignet. Es eignet sich auch für Vue.js-Projekte mit geringer Komplexität, da einige Debugging-Funktionen wie Zeitreisen und Bearbeiten noch nicht unterstützt werden.

Die Verwendung von Vuex für kleine bis mittelgroße Vue.js-Projekte ist übertrieben, da es schwergewichtig ist und erhebliche Auswirkungen auf die Leistung hat. Daher eignet sich Vuex für große und hochkomplexe Vue.js-Projekte.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Fallstricke von Vuex und Pinia in Vue3. Weitere relevante Vuex- und Pinia-Fallstricke in Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!