Zustandsverwaltung
Was ist Zustand
In ofa.js bezeichnet Status das data-Attribut einer Komponente oder Seitenmoduls selbst. Dieser Status kann nur innerhalb der aktuellen Komponente verwendet werden, um interne Daten der Komponente zu speichern und zu verwalten.
Wenn mehrere Komponenten oder Seiten dieselben Daten gemeinsam nutzen müssen, werden Daten traditionell durch Ereignisweitergabe oder schrittweise Props-Weitergabe übergeben. Diese Methode führt in komplexen Anwendungen zu schwer wartbarem Code. Daher ist eine Zustandsverwaltung erforderlich – durch die Definition eines gemeinsamen Zustandsobjekts, auf das mehrere Komponenten oder Seitenmodule zugreifen und dieses ändern können, wird eine gemeinsame Nutzung des Zustands ermöglicht.
Tipp: Statusverwaltung eignet sich für Szenarien, in denen Daten über Komponenten und Seiten hinweg geteilt werden müssen, wie z. B. Benutzerinformationen, Warenkorb, Theme-Konfiguration, globale Einstellungen etc.
Generieren des Statusobjekts
Erstellen Sie mit $.stanz({}) ein reaktives Zustandsobjekt. Diese Methode nimmt ein einfaches Objekt als Ausgangsdaten entgegen und gibt einen reaktiven Zustandsproxy zurück.
Grundlegende Verwendung (Globaler Status)
// Startseite der App
export const home = "./list.html";
// Konfiguration der Seitenübergangsanimation
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
export const contacts = $.stanz({
list: [{
id: 10010,
name: "Pete",
info: "Jeder Tag ist ein neuer Anfang, nach dem Regen kommt die Sonne.",
},{
id: 10020,
name: "Mike",
info: "Das Leben ist wie ein Ozean, nur wer einen starken Willen hat, kann das andere Ufer erreichen.",
},{
id: 10030,
name: "John",
info: "Das Geheimnis des Erfolgs liegt darin, an seinen Träumen festzuhalten und niemals aufzugeben.",
}]
});
// await fetch("/list.api").then(e=>e.json()).then(list=>data.list = list)
Kontaktliste
-
Name: {{$data.name}}
Eigenschaften des Zustandsobjekts
1. Reaktives Update
$.stanz() erzeugte Statusobjekte sind reaktiv. Wenn sich die Statusdaten ändern, werden alle Komponenten, die diese Daten referenzieren, automatisch aktualisiert.
const store = $.stanz({ count: 0 });
// In der Komponente
export default {
data: {
store: {},
},
proto: {
increment() {
store.count++; // Alle Komponenten, die auf store.count verweisen, werden automatisch aktualisiert
},
},
attached() {
// Direkt auf die Eigenschaft des Zustandsobjekts verweisen
this.store = store;
},
detached() {
this.store = {}; // Wenn die Komponente zerstört wird, die angehängten Zustandsdaten leeren
},
};2. Tiefe Responsivität
Zustandsobjekte unterstützen tiefe Reaktivität, Änderungen in verschachtelten Objekten und Arrays werden ebenfalls überwacht.
const store = $.stanz({
user: {
name: "ZhangSan",
settings: {
theme: "dark",
},
},
list: [],
});
// Das Ändern verschachtelter Eigenschaften löst ebenfalls ein Update aus
store.user.name = "LiSI";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "Neue Aufgabe" });Beste Praktiken
1. Status beim attached-Zyklus des Components mounten
Es wird empfohlen, den gemeinsamen Zustand im attached-Lebenszyklus der Komponente zu mounten.
export default {
data: {
list: [],
},
attached() {
// Gemeinsamen Zustand an die data-Komponente anhängen
this.list = data.list;
},
detached() {
// Beim Zerstören der Komponente die angehängten Zustandsdaten leeren, um Speicherverluste zu vermeiden
this.list = [];
},
};2. Sinnvolle Verwaltung des Zustandsbereichs
Der Gültigkeitsbereich des Zustands hängt von der Definitionsposition und der Exportmethode ab:
In einer eigenständigen JS-Datei exportierter Zustand:Globaler Zustand, auf den die gesamte Anwendung zugreifen und ihn ändern kann, nach dem Import mit import oder load.
// user-store.js
export const userStore = $.stanz({ user: null, theme: "light" });Zustand, der innerhalb von Seiten- oder Komponentenmodulen definiert ist: Modulzustand, der nur innerhalb dieses Moduls verwendet wird.
<template component>
...
<script>
const localStore = $.stanz({ total: 0 });
export default async () => {
return {
data: {
localStore: {}
},
attached() {
this.localStore = localStore;
},
detached() {
// Beim Zerstören der Komponente die eingehängten Zustandsdaten leeren
this.localStore = {};
}
};
};
</script>
</template>Statusverwaltung innerhalb des Moduls
{{$index}} -
{{val}} - {{cartStore.total}}
Hinweise
-
Zustandsbereinigung: Bereinigen Sie im Lebenszyklus "detached" der Komponente rechtzeitig die Verweise auf Zustandsdaten, um Speicherlecks zu vermeiden.
-
Zirkuläre Abhängigkeiten vermeiden: Zwischen Zustandsobjekten sollten keine zirkulären Verweise entstehen, da dies zu Problemen im reaktiven System führen kann.
-
Große Datenstrukturen: Ziehen Sie bei großen Datenstrukturen die Verwendung von berechneten Eigenschaften oder fragmentiertes Management in Betracht, um unnötige Leistungseinbußen zu vermeiden.
-
Zustandskonsistenz: Achten Sie bei asynchronen Operationen auf die Konsistenz des Zustands und verwenden Sie Transaktionen oder Batch-Updates, um die Datenintegrität zu gewährleisten.