Tutoriel de base de VUE3 : Utilisation de la gestion d'état de Vue.js

Vue.js est un framework JavaScript moderne pour créer des interfaces utilisateur Web. C'est un framework très populaire et largement utilisé par les développeurs. Une fonctionnalité importante de Vue.js est la gestion des états, vous permettant de gérer le flux et le contrôle des données au sein de votre application. Dans cet article, nous présenterons les bases de la gestion de l'état de Vue.js et montrerons comment utiliser Vue.js pour gérer l'état.

Bases de la gestion de l'état Vue.js

La gestion de l'état Vue.js est implémentée sur la base de la bibliothèque Vuex. Vuex est une bibliothèque de gestion d'état spécifiquement pour Vue.js, utilisée pour gérer la propagation et le partage des données au sein des applications. Vuex comprend quatre concepts de base : l'état, les mutations, les actions et les getters.

State :

State représente l'état d'une application et représente le stockage de toutes les données dans Vue.js. Il s'agit d'un conteneur de stockage qui stocke les données de notre application.

Mutations :

Les mutations sont un moyen de changer d'état. Elles ne peuvent être exécutées que dans l'objet d'état. Elles ne peuvent être que synchrones et ne peuvent pas gérer d'opérations asynchrones.

Actions : 

Les actions sont utilisées pour recevoir des requêtes asynchrones des composants Vue et utiliser des mutations pour mettre à jour l'état de l'application. Il peut obtenir des données côté serveur et utiliser des mutations pour mettre à jour l'état de l'application après avoir reçu les données.

Getters :

Getters vous permettent d'obtenir des données spécifiques du statut. C'est similaire à une propriété calculée. Cette fonctionnalité peut être utilisée pour obtenir facilement des données d’état.

Utilisation de la gestion d'état Vue.js

Dans cette section, nous montrerons comment utiliser la gestion d'état dans une application Vue.js.

Installer Vuex :

Tout d'abord, nous devons installer la bibliothèque Vuex. Installez à l'aide du gestionnaire de packages npm dans votre application Vue.js.

npm install vuex

Créer un état :

Ensuite, nous devons créer un état dans notre application. Cet état est un objet JavaScript qui contient nos données et notre état mutable.

const store = new Vuex.Store({
state: {

count: 0

}
})

L'extrait de code ci-dessus crée un état de comptage La valeur initiale de count est 0. L'objet store nous permet d'accéder à l'état. variables. Nous Cet état peut être utilisé dans différentes parties de l'application pour afficher et mettre à jour les données.

Statut d'accès :

Maintenant que nous avons stocké le statut du décompte dans l'objet du magasin, l'étape suivante consiste à obtenir le statut. Pour cela, nous utilisons des getters pour accéder au statut :

getters : {

getCount: state => state.count

}

Le code ci-dessus définit un getter : getCount, qui renvoie la valeur du count status.

Mise à jour du statut :

Ensuite, nous avons besoin d'une mutation pour mettre à jour notre statut.

mutations : {

increment (state) {
    state.count++;
},
decrement (state) {
    state.count--;
}

}

L'extrait de code ci-dessus définit deux mutations : incrémenter et décrémenter. Ces deux mutations sont utilisées ici pour incrémenter et décrémenter le compteur.

Utilisation de l'état :

Maintenant que nous avons défini notre état, nos getters et nos mutations, nous pouvons utiliser ces valeurs dans nos composants Vue.js. T & lt; modèle & gt;

& lt; div & gt;

<h1>{{getCount}}</h1>
<button @click="increment">Increase</button>
<button @click="decrement">Decrease</button>

& lt;/div & lt;/test & lt; /script & gt;

le code ci-dessus montre comment utiliser notre état, nos getters et nos mutations dans les composants Vue. Nous utilisons des mutations d'incrémentation et de décrémentation, et le getter getCount pour obtenir le statut. De cette façon, nous pouvons utiliser l'état du composant pour afficher et mettre à jour les données.

Conclusion

La gestion de l'état Vue.js est un outil flexible qui peut facilement gérer le flux de données dans votre application. En utilisant la gestion d'état intégrée à Vue.js ou en utilisant des bibliothèques tierces, nous pouvons facilement gérer l'état de notre application. Lorsque vous utilisez la gestion d'état dans une application Vue.js, n'oubliez pas que l'état ne doit contenir que les données de votre application et aucune logique. La gestion de l'état doit rester simple et claire afin de garantir une bonne maintenabilité et évolutivité de l'application.

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!