Gestion d'état
Qu'est-ce que l'état
Dans ofa.js, l'état fait référence à la propriété data propre à un composant ou à un module de page. Cet état ne peut être utilisé que sur le composant actuel et sert à stocker et gérer les données internes de ce composant.
Lorsque plusieurs composants ou pages doivent partager les mêmes données, la méthode traditionnelle consiste à les transmettre par événements ou à travers plusieurs niveaux de props, ce qui rend le code difficile à maintenir dans les applications complexes. Il est donc nécessaire d’avoir recours à la gestion d’état — en définissant un objet d’état partagé, plusieurs composants ou modules de page peuvent accéder à ces données et les modifier, réalisant ainsi le partage de l’état.
Astuce : La gestion d'état est adaptée aux scénarios où des données doivent être partagées entre composants et pages, comme les informations utilisateur, le panier, la configuration du thème, la configuration globale, etc.
Générer un objet d'état
En utilisant $.stanz({}) pour créer un objet d'état réactif. Cette méthode reçoit un objet ordinaire comme données initiales et renvoie un proxy d'état réactif.
Utilisation de base
// Adresse de la page d'accueil de l'application
export const home = "./list.html";
// Configuration de l'animation de transition de page
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: "Chaque jour est un nouveau départ, le soleil brille toujours après la tempête.",
},{
id: 10020,
name: "Mike",
info: "La vie est comme l'océan, seuls ceux qui ont une volonté ferme peuvent atteindre l'autre rive.",
},{
id: 10030,
name: "John",
info: "Le secret du succès est de persévérer dans ses rêves et de ne jamais abandonner.",
}]
});
// await fetch("/list.api").then(e=>e.json()).then(list=>data.list = list)
Contacts
-
Nom: {{$data.name}}
Caractéristiques de l'objet d'état
1. Mise à jour réactive
$.stanz() 创建的状态对象是响应式的。当状态数据发生变化时，所有引用该数据的组件都会自动更新。
const store = $.stanz({ count: 0 });
// Dans le composant
export default {
data: {
store: {}
},
proto:{
increment() {
store.count++; // Tous les composants qui référencent store.count seront automatiquement mis à jour
}
},
attached() {
// Référence directe aux propriétés de l'objet d'état
this.store = store;
},
detached(){
this.store = {}; // Lorsque le composant est détruit, videz les données d'état montées
}
};2. Réactivité en profondeur
L'objet d'état prend en charge la réactivité en profondeur ; les changements des objets et tableaux imbriqués sont également surveillés.
const store = $.stanz({
user: {
name: "张三",
settings: {
theme: "dark"
}
},
list: []
});
// La modification des propriétés imbriquées déclenche également la mise à jour
store.user.name = "李四";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "Nouvelle tâche" });Bonnes pratiques
1. Monter l'état lors de la phase attached du composant
Il est recommandé de monter l’état partagé dans le cycle de vie attached du composant :
export default {
data: {
list: []
},
attached() {
// Monter l'état partagé sur les data du composant
this.list = data.list;
},
detached() {
// Lors de la destruction du composant, vider les données d'état montées pour éviter les fuites mémoire
this.list = [];
}
};2. Gestion raisonnée de la portée des états
- État global : Convient aux données accessibles par toute l'application (comme les informations utilisateur, la configuration globale)
- État de module : Convient aux données partagées en interne par un module fonctionnel spécifique
// État d'appel global
export const globalStore = $.stanz({ user: null, theme: "light" });
// État utilisé dans le module
const cartStore = $.stanz({ total: 0 });Gestion d'état au sein du module
{{$index}} -
{{val}} - {{cartStore.total}}
Remarques
-
Nettoyage d'état : Dans le cycle de vie
detacheddu composant, nettoyez en temps opportun les références aux données d'état pour éviter les fuites de mémoire. -
Éviter les dépendances circulaires : Les objets d'état ne doivent pas former de références circulaires entre eux, cela pourrait entraîner des problèmes dans le système réactif.
-
Structures de données volumineuses : Pour les structures de données volumineuses, envisagez d'utiliser des propriétés calculées ou une gestion par tranches pour éviter des surcoûts de performance inutiles.
-
Cohérence de l'état : Faites attention à la cohérence de l'état lors des opérations asynchrones, vous pouvez utiliser des transactions ou des mises à jour par lots pour garantir l'intégrité des données.