Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung

Hintergrund

Mit der schrittweisen Anwendung von Vue3 steigt der Bedarf an Zustandsverwaltung. Ursprünglich basierte die Zustandsverwaltung auf Vuex4, aber auch Vuex4 wies einige Probleme auf. Aus persönlicher Sicht ähnelt Vuex4 einem Übergangsprodukt und seine Unterstützung für TypeScript ist nicht vollständig. Wenn Sie TypeScript zum Schreiben von Komponenten verwenden, müssen Sie bestimmte Schritte befolgen, um Typen korrekt abzuleiten, und es ist nicht modulfreundlich. Kia King, ein Hauptbeitragender von Vuex, sagte auch, dass Vuex5 bereits geplant ist und vollständige TypeScript-Unterstützung bieten kann. Gibt es also vor dem Erscheinen von Vuex5 oder wenn Vuex direkt „aufgegeben“ wird, andere Lösungen für die Zustandsverwaltung?

Bereitstellen / Injizieren

Provide und Inject sind keine neuen Features von Vue3, sie existierten bereits in Vue2. In der Dokumentation wird erwähnt, dass Provide- und Inject-Bindungen nicht reaktiv sind. Wenn Sie jedoch ein abhörbares Objekt übergeben, sind die Eigenschaften dieses Objekts weiterhin abhörbar.

Vue3 hat basierend auf Computed und Watch die responsiven APIs ref und reactive hinzugefügt, die die Anwendung von provide und inject bequemer machen können. Kann in Kombination mit der Idee der Composition API eine vereinfachte Version der Statusverwaltung implementiert werden?

Extrahieren des gemeinsamen Status

// src/context/rechner.ts

importiere { ref, inject, provide, readonly } von „vue“;

Typ Rechner = {
    Anzahl: Zahl;
    erhöhen: () => ungültig;
    updateCount: (num: Zahl) => ungültig;
};

//Schlüssel und eindeutiges Token bereitstellen const CalculatorSymbol = Symbol();

//Anbieter exportiert const calculatorProvide = () => {
  	//Zahl const count = ref<Zahl>(1);
  	//Erhöhungsmethode const increase = () => {
        Anzahl.Wert++;
    };
   //Update-Methode const updateCount = (num: number) => {
        Anzahl.Wert = Nummer;
    };
  	//Das bereitgestellte gemeinsam genutzte Statusobjekt const depends = {
        count: readonly(count), // schreibgeschützter Status, ändern durch Methode „erhöhen“,
        AnzahlAktualisierungen
    };
  	//Verwenden Sie die Provide-API, um das Statusobjekt zu implementieren. provide(CalculatorSymbol, depends);
  	//Gibt das Statusobjekt zurück, damit der Peer „return depends“ aufrufen kann.
};

//Injektionsverfahren export const calculatorInject = () => {
    //Verwenden Sie die Inject-API, um den Status einzufügen. const calculatorContext = inject<Calculator>(CalculatorSymbol);
  	//Fehler bei der Prüfung auf Injektion ohne Freigabe if (!calculatorContext) {
        throw new Error('Inject muss nach Provide verwendet werden');
    }
  	//Gibt den eingefügten Beitragsstatus zurück. return calculatorContext;
};

Daten bereitstellen

Im Vergleich zur globalen Freigabe von Vuex kann Provide/Inject eine globale oder lokale Freigabe erreichen.

Globale Freigabe, Sie können einen globalen Status in main.ts einfügen:

// quelle/main.ts

importiere { createApp, h } von „vue“;
App aus „@/App.vue“ importieren;
importiere { TaschenrechnerProvide } aus '@/context/Taschenrechner';

// Eine Vue-Instanz erstellen const app = createApp({
    aufstellen() {
        RechnerProvide();
        return () => h(App);
    }
});

// Mounten Sie die Instanz app.mount('#app');

Wenn Sie nur lokal teilen möchten, können Sie den Status in die übergeordnete Komponente einfügen

// src/views/übergeordnet.vue

importiere { defineComponent } von "vue";
importiere { TaschenrechnerProvide } aus '@/context/Taschenrechner';

exportiere StandarddefiniereKomponente({
  Name: "Elternteil",
  aufstellen() {
    //Gemeinsam genutzte Daten RechnerProvide();
  }
});

Einfügen von Daten

Unterkomponenten können den Zustand durch den Zustand einfügen, verwenden oder ändern

// src/views/child.vue

importiere { defineComponent } von "vue";
importiere { TaschenrechnerInject } von '@/context/Taschenrechner';

exportiere StandarddefiniereKomponente({
  Name: "Kind",
  aufstellen() {
    //Daten einfügen const { count, increase, updateCount } = calculatorInject();
  }
});

Zusammenfassung

Tatsächlich können Sie sich die Abhängigkeitsinjektion (Provide/Inject) als „Langstrecken-Props“ vorstellen, außer:

• Die übergeordnete Komponente muss nicht wissen, welche untergeordneten Komponenten die von ihr bereitgestellte Eigenschaft verwenden.
• Unterkomponenten müssen nicht wissen, woher die eingefügte Eigenschaft stammt
  

Vue3 macht die Abhängigkeitsinjektion flexibler und komfortabler und simuliert dadurch eine kleine Zustandsverwaltung. In meinem persönlichen Test ist die Unterstützung für TypeScript relativ vollständig.

reaktiv

Gibt es also eine andere Möglichkeit zur Statusverwaltung, ohne Provide/Inject zu verwenden? Direkt auf dem Code.

Extrahieren des gemeinsamen Status

// src/context/rechner.ts

Typ Rechner = {
    Anzahl: Zahl;
    erhöhen: () => ungültig;
    updateCount: (num: Zahl) => ungültig;
};

//Gemeinsamer Status const calculatorStore = reactive<Calculator>({
    Anzahl: 1,
    erhöhen: () => {
        RechnerStore.Anzahl++;
    },
    updateCount: (num: Zahl) => {
        RechnerStore.Anzahl = Anzahl;
    }
});

exportiere { TaschenrechnerStore };

Verwenden des freigegebenen Status

Die Verwendung des Status ist sehr einfach. Sie müssen nur den Status importieren. Die Komponenten, die den Status verwenden müssen, müssen importiert werden.

// src/views/any.vue

importiere { defineComponent } von "vue";
importiere { CalculatorStore } aus '@/context/calculator';

exportiere StandarddefiniereKomponente({
  Name: "beliebig",
  aufstellen() {
    Konsole.log(RechnerStore.Anzahl);
  }
});

Zusammenfassung

Tatsächlich verwendet diese Lösung die Reaktionsfähigkeit von Reactive und das Prinzip des Importierens derselben Instanz. Im Vergleich zur Abhängigkeitsinjektion ist sie einfacher und grober und kann auch die TypeScript-Verifizierung korrekt unterstützen. Allerdings kann die Abhängigkeitsinjektion unterschiedliche Daten in unterschiedlichen Stammknoten gemeinsam nutzen, während diese reaktive Lösung immer eine Instanz gemeinsam nutzt, was in einigen Geschäftsszenarien nicht anwendbar ist.

Abschluss

Erstens ist Vuex immer noch eine ausgereiftere und umfassendere Lösung. Es geht nur um eine einfache Zustandsverwaltung. Sie können versuchen, Ihr Denken zu ändern, um es zu lösen. Natürlich können die oben genannten Lösungen noch viele unvollständige Überlegungen enthalten, und Sie können mir gerne einige Ratschläge geben ~

Oben finden Sie den detaillierten Inhalt der ausführlichen Erläuterung zur Verwendung der Vue3-Statusverwaltung. Weitere Informationen zur Verwendung der Vue3-Statusverwaltung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!