Quels sont les scénarios d'utilisation et les attributs de vuex ?

Scénarios d'utilisation de Vuex : 1. Module de gestion des informations personnelles de l'utilisateur ; 2. Module panier pour les projets e-commerce ; 3. Module Ma commande ; 4. Sur la page de règlement des commandes. Les attributs vuex sont : 1. état, utilisé pour stocker les variables ; 2. getters 3. mutations 4. actions ;

L'environnement d'exploitation de ce tutoriel : système windows7, version vue2.9.6&&vuex4.0.2, ordinateur DELL G3.

Qu'est-ce que vuex ?

vuex est un plug-in utilisé pour gérer la communication entre les composants. C'est un modèle de gestion d'état spécialement développé pour les applications [vue.js] Il résout le problème du partage du même état entre les composants, et il peut améliorer l'état. gérés en externe au composant.

Pourquoi avez-vous besoin de vuex ?

Lorsque plusieurs composants dépendent du même état, la méthode de transmission des paramètres devient plus compliquée en raison de l'imbrication entre plusieurs couches de composants. De plus, si les composants parent-enfant sont utilisés pour boire ou modifier et synchroniser directement l'état. événements, la copie phénolique rend le modèle fragile et rend le code impossible à maintenir.

Quand et dans quelles circonstances dois-je utiliser vuex ?

Lors de la création d'une application d'une seule page de taille moyenne à grande, vous devez réfléchir à la manière de mieux gérer l'état en dehors du composant.

Remarque : si vous ne développez pas une grande application d'une seule page, l'utilisation de vuex peut être lourde et redondante. Autrement dit, un projet qui peut être développé rapidement finira par être compliqué après avoir utilisé vuex. Généralement, un simple mode magasin suffira.

Les cinq attributs majeurs de vuex

état, getters, mutations, actions, modules.

1. state : données de base de vuex, utilisées pour stocker les variables

2. geeter : données dérivées des données de base (state), équivalentes aux attributs calculés de la mutation state

3. , doit être synchrone (si vous devez utiliser l'action de manière asynchrone). Chaque mutation a un type d'événement de chaîne (type) et une fonction de rappel (gestionnaire).

La fonction de rappel est l'endroit où nous modifions réellement l'état, et elle acceptera l'état comme premier paramètre et soumettra la charge utile comme deuxième paramètre.

4. Action : La fonction est à peu près la même que la mutation, la différence est ==》1. L'action soumet la mutation au lieu de changer directement l'état. 2. L'action peut contenir n'importe quelle opération asynchrone.

5. Modules : Vuex modulaire permet à chaque module d'avoir son propre état, mutation, action et getters, ce qui rend la structure très claire et facile à gérer.

Scénarios d'utilisation de vuex :

• Module de gestion des informations personnelles de l'utilisateur ;

• Le module panier des projets e-commerce L'interface pour obtenir la quantité du panier est appelée à chaque fois (prérequis), et le. L'effet est qu'il est implémenté, mais chaque requête HTTP consomme les performances du navigateur. En revanche, utiliser les mutations vuex pour déclencher est plus avantageux

• Dans mon module de commande, la liste de commandes clique également pour annuler la commande, puis met à jour la liste de commandes correspondante. Dans ce cas, Vuex est également utilisé pour stocker un. état. , surveillez ce statut et mettez à jour la liste correspondante lorsqu'elle change ;

• Depuis la page de règlement des commandes, entrez dans la page de sélection des coupons et sélectionnez la page des coupons. Comment enregistrer les informations du coupon sélectionné ? L'État enregistre les informations du coupon. Lors de la sélection d'un coupon, les mutations sont soumises sur la page de règlement de la commande, le coupon sélectionné est obtenu et les informations de réduction de la commande sont mises à jour

Recommandations associées : "tutoriel vue.js" ;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!