Zustandsverwaltung
Was ist ein Status
In ofa.js bezieht sich State (Zustand) auf das data-Attribut der Komponente oder des Seitenmoduls selbst. Dieser Zustand kann nur innerhalb der aktuellen Komponente verwendet werden und dient zum Speichern und Verwalten der internen Daten der Komponente.
Wenn mehrere Komponenten oder Seiten dieselben Daten teilen müssen, besteht die herkömmliche Vorgehensweise darin, sie über Events oder durch mehrere Ebenen von props weiterzugeben. In komplexen Anwendungen führt dies zu schwer wartbarem Code. Daher ist State-Management erforderlich – durch Definition eines gemeinsamen State-Objekts können mehrere Komponenten oder Seitenmodule auf diese Daten zugreifen und sie ändern, wodurch der Status geteilt wird.
Hinweis: State-Management ist für Szenarien geeignet, in denen Daten über Komponenten und Seiten hinweg geteilt werden müssen, wie z. B. Benutzerinformationen, Warenkorb, Theme-Konfiguration, globale Konfiguration usw.
Generieren des Statusobjekts
Erstelle ein reaktives Statusobjekt mit $.stanz({}). Diese Methode erhält ein gewöhnliches Objekt als Ausgangsdaten und gibt einen reaktiven Status-Proxy zurück.
Grundlegende Verwendung
// Startseitenadresse der Anwendung
export const home = "./list.html";
// Konfiguration für Seitenwechselanimationen
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: "Peter",
info: "Jeder Tag ist ein Neuanfang, nach dem Regen kommt die Sonne.",
},{
id: 10020,
name: "Mike",
info: "Das Leben ist wie ein Ozean, nur wer starken Willens ist, erreicht das andere Ufer.",
},{
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)
Adressbuch
-
Name: {{$data.name}}
Eigenschaften von Zustandsobjekten
1. Reaktive Aktualisierung
$.stanz() erstellte Zustandsobjekte sind reaktiv. Wenn sich die Zustandsdaten ä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() {
// Direktes Referenzieren der Eigenschaften des Zustandsobjekts
this.store = store;
},
detached(){
this.store = {}; // Beim Zerstören der Komponente, die angehängten Zustandsdaten leeren
}
};2. Tiefe Reaktivität
Das Statusobjekt unterstützt tiefe Reaktivität; Änderungen an verschachtelten Objekten und Arrays werden ebenfalls überwacht.
const store = $.stanz({
user: {
name: "张三",
settings: {
theme: "dark"
}
},
list: []
});
// 修改嵌套属性也会触发更新
store.user.name = "李四";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "新任务" });Best Practices
1. Den Status in der Attached-Phase der Komponente einhängen
Es wird empfohlen, den gemeinsamen Status im attached-Lebenszyklus der Komponente zu mounten:
export default {
data: {
list: []
},
attached() {
// Den gemeinsamen Status an die data des Components hängen
this.list = data.list;
},
detached() {
// Beim Zerstören des Components die angehängten Zustandsdaten löschen, um Speicherlecks zu verhindern
this.list = [];
}
};2. Angemessene Verwaltung des Statusgültigkeitsbereichs
- 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 Aufrufstatus
export const globalStore = $.stanz({ user: null, theme: "light" });
// Innerhalb des Moduls verwendeter Status
const cartStore = $.stanz({ total: 0 });Zustandsverwaltung innerhalb des Moduls
{{$index}} -
{{val}} - {{cartStore.total}}
Hinweise
-
Zustandsbereinigung: Bereinigen Sie im
detached-Lebenszyklus der Komponente zeitnah Referenzen auf Zustandsdaten, um Speicherlecks zu vermeiden. -
Vermeidung von Zirkelabhängigkeiten: Erzeugen Sie keine zirkulären Verweise zwischen Zustandsobjekten, da dies das Reaktivitätssystem beeinträchtigen kann.
-
Große Datenstrukturen: Verwenden Sie bei großen Datenstrukturen berechnete Eigenschaften oder fragmentiertes Management, um unnötige Leistungseinbußen zu vermeiden.
-
Zustandskonsistenz: Achten Sie bei asynchronen Operationen auf die Konsistenz des Zustands; nutzen Sie Transaktionen oder Stapelaktualisierungen, um die Datenintegrität sicherzustellen.