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
// 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 store.count referenzieren, werden automatisch aktualisiert
}
},
attached() {
// Direktes Referenzieren der Eigenschaften des Zustandsobjekts
this.store = store;
},
detached(){
this.store = {}; // Beim Zerstören der Komponente die gemounteten 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: "Zhang San",
settings: {
theme: "dark"
}
},
list: []
});
// Das Ändern verschachtelter Eigenschaften löst ebenfalls Aktualisierungen aus
store.user.name = "Li Si";
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() {
// Den gemeinsamen Zustand in die data der Komponente einhängen
this.list = data.list;
},
detached() {
// Beim Zerstören der Komponente den eingehängten Zustand leeren, um Speicherlecks zu verhindern
this.list = [];
}
};2. Sinnvolle Verwaltung des Zustandsbereichs
- Globaler Zustand: Geeignet für Daten, auf die die gesamte Anwendung zugreifen muss (z. B. Benutzerinformationen, globale Konfiguration)
- Modulzustand: Geeignet für Daten, die innerhalb eines bestimmten Funktionsmoduls gemeinsam genutzt werden
// Globaler Aufrufzustand
export const globalStore = $.stanz({ user: null, theme: "light" });
// Im Modul verwendeter Zustand
const cartStore = $.stanz({ total: 0 });Statusverwaltung innerhalb des Moduls
{{$index}} -
{{val}} - {{cartStore.total}}
Hinweise
-
Zustandsbereinigung: Entfernen Sie rechtzeitig Verweise auf Zustandsobjekte im
detached-Lebenszyklus der Komponente, um Speicherlecks zu vermeiden. -
Vermeidung zirkulärer Abhängigkeiten: Bilden Sie keine zirkulären Referenzen zwischen Zustandsobjekten, da dies zu Problemen im reaktiven System führen kann.
-
Große Datenstrukturen: Verwenden Sie für große Datenstrukturen berechnete Eigenschaften oder verwalten Sie diese in Teilen, 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.