Gestion d'état
Qu'est-ce que l'état
Dans ofa.js, l'état désigne l'attribut data propre au composant ou au module de page. Cet état ne peut être utilisé que dans le composant actuel, pour stocker et gérer les données internes de ce composant.
Lorsque plusieurs composants ou pages doivent partager les mêmes données, l'approche traditionnelle consiste à les transmettre via des événements ou des props de manière hiérarchique, ce qui, dans les applications complexes, rend le code difficile à maintenir. Il est donc nécessaire d'utiliser une gestion d'état — en définissant un objet d'état partagé, permettant à plusieurs composants ou modules de page d'accéder et de modifier ces données, réalisant ainsi le partage de l'état.
Indice : La gestion d'état est adaptée aux scénarios nécessitant le partage de données entre composants et pages, tels que les informations utilisateur, le panier d'achat, la configuration du thème, la configuration globale, etc.
Générer un objet d'état
Créez un objet d'état réactif via $.stanz({}). Cette méthode prend 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 changement 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: "Pete",
info: "Chaque jour est un nouveau début, le soleil brille toujours après l'orage.",
},{
id: 10020,
name: "Mike",
info: "La vie est comme l'océan, seuls les hommes à la volonté forte atteignent 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)
Carnet d'adresses
-
Nom : {{$data.name}}
Propriétés de l'objet d'état
1. Mises à jour réactives
$.stanz() crée un objet d'état réactif. Lorsque les données d'état changent, tous les composants qui référencent ces données sont automatiquement mis à jour.
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 mis à jour automatiquement
}
},
attached() {
// Référencez directement la propriété 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é profonde, les changements dans les objets imbriqués et les tableaux sont également surveillés.
const store = $.stanz({
user: {
name: "ZhangShan",
settings: {
theme: "dark"
}
},
list: []
});
// La modification de propriétés imbriquées déclenche également la mise à jour
store.user.name = "LiSi";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "Nouvelle tâche" });Meilleures pratiques
1. Montage de l'état dans 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() {
// Attacher l'état partagé aux données du composant
this.list = data.list;
},
detached() {
// Lors de la destruction du composant, vider les données d'état attachées pour éviter les fuites mémoire
this.list = [];
}
};2. Gérer raisonnablement la portée de l'état
- État global : convient pour les données auxquelles toute l’application doit accéder (comme les informations utilisateur, la configuration globale)
- État du module : convient pour les données partagées à l’intérieur d’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}}
Points d'attention
-
Nettoyage de l'état : Dans le cycle de vie
detacheddu composant, nettoyez rapidement les références aux données d'état pour éviter les fuites de mémoire. -
Éviter les dépendances circulaires : Ne formez pas de références circulaires entre les objets d'état, cela pourrait causer des problèmes dans le système réactif.
-
Structures de données volumineuses : Pour les grandes structures de données, envisagez d'utiliser des propriétés calculées ou une gestion par fragments pour éviter des surcoûts de performance inutiles.
-
Cohérence de l'état : Dans les opérations asynchrones, faites attention à la cohérence de l'état, vous pouvez utiliser des transactions ou des mises à jour par lots pour garantir l'intégrité des données.