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 (État global)
// 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 font référence à store.count seront automatiquement mis à jour
},
},
attached() {
// Référence directe à la propriété de l'objet d'état
this.store = store;
},
detached() {
this.store = {}; // Lorsque le composant est détruit, effacez 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: "ZhangSan",
settings: {
theme: "dark",
},
},
list: [],
});
// La modification de propriétés imbriquées déclenchera également la mise à jour
store.user.name = "LiSi";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "New Task" });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() {
// Monter l'état partagé sur les données du composant
this.list = data.list;
},
detached() {
// Lorsque le composant est détruit, effacer les données d'état montées pour éviter les fuites de mémoire
this.list = [];
},
};2. Gérer raisonnablement la portée de l'état
La portée d'un état dépend de l'emplacement de sa définition et de la manière dont il est exporté :
État exporté via export dans un fichier JS indépendant : état global, accessible et modifiable par toute l'application, utilisé après importation via import ou load.
// boutique-utilisateur.js
export const userStore = $.stanz({ user: null, theme: "light" });État défini à l’intérieur d’une page ou d’un module composant : état du module, utilisé uniquement en interne dans ce module.
<template component>
...
<script>
const localStore = $.stanz({ total: 0 });
export default async () => {
return {
data: {
localStore: {}
},
attached() {
this.localStore = localStore;
},
detached() {
// Lorsque le composant est détruit, vider les données d'état montées
this.localStore = {};
}
};
};
</script>
</template>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 créez pas de références circulaires entre les objets d'état, ce qui peut entraîner 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 fragmentée pour éviter des coûts de performance inutiles.
-
Cohérence de l'état：Dans les opérations asynchrones, veillez à 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.