Introduction à l'utilisation de store dans vuex (avec exemples)

Cet article vous apporte une introduction à l'utilisation de store dans vuex (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Introduction à la gestion des statuts (vuex)
​ ​ vuex est un modèle de gestion d'état développé spécifiquement pour les applications vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible. Vuex intègre également l'extension devtools de l'outil de débogage officiel de Vue, qui fournit des fonctions de débogage avancées telles que le débogage de voyage dans le temps sans configuration, l'importation et l'exportation d'instantanés d'état, etc.

2. Noyau de gestion d'état
La gestion d'état comporte 5 cœurs, à savoir l'état, le getter, la mutation, l'action et le module. Présentons-les brièvement respectivement :
1. état
State est un arbre d'état unique. Dans state, nous devons définir les tableaux, objets, chaînes, etc. que nous devons gérer. Ce n'est que s'ils sont définis ici que l'état de l'objet que vous avez défini peut être obtenu dans la vue. js composant.
2. getteur
Getter est quelque peu similaire aux propriétés calculées de vue.js. Lorsque nous devons dériver un état de l'état du magasin, nous devons alors utiliser getter qui recevra l'état comme premier paramètre et la valeur de retour de getter sera basée. sur ses dépendances. Il est mis en cache et ne sera recalculé que lorsque la valeur de la dépendance dans le getter (une valeur dans l'état qui doit être dérivée) change.
3. mutations
La seule façon de changer l’état du magasin est de soumettre une mutation, ce qui est très similaire à un événement. Chaque mutation a un type d'événement de type chaîne et une fonction de rappel. Si nous devons modifier la valeur de state, nous devons la modifier dans la fonction de rappel. Si nous voulons exécuter cette fonction de rappel, nous devons exécuter une méthode d'appel correspondante : store.commit.
4. action
L'action peut soumettre des mutations, store.commit peut être exécuté en action et toute opération asynchrone peut être en action. Si nous voulons utiliser cette action sur la page, nous devons exécuter store.dispatch
5, module
Le module ne résout en fait le problème que lorsque l'état est très complexe et volumineux. Le module peut diviser le magasin en modules, et chaque module a son propre état, mutation, action et getter.

3. Exemple
1. Créez d'abord un store.js, puis introduisez vuex

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {   
userInfo: {}
}const mutations = {
    updateUserInfo(state, infos) {
        state.userInfo= infos
    }
}
export default new Vuex.Store({
    state,
    mutations
})

Un store.js aussi simple est complet.
Comment utilisons-nous cette gestion d'état établie dans l'interface ?

1. Définir (mettre à jour) les données

首先在script下引入store.js
<script>
import store from &#39;store.js的路径&#39;import { 
mapMutations 
} 
from &#39;vuex&#39;methods:{
    ...mapMutations([        
    &#39;updateUserInfo&#39;
    ])
}
</script>

Là où les données doivent être mises à jour , mettez à jour les données dans

this.updateUserInfo(data)

2. Obtenez les données

<script>
import store from &#39;store.js的路径&#39;import { 
mapState 
} 
from &#39;vuex&#39;computed: {
   ...mapState({
        userInfo: &#39;userInfo&#39;
   })
},
created() {
    console.log(this.userInfo)
}
</script>

Obtenez les données si nécessaire dans les méthodes || montées créées

Remarque : Vous pouvez également définir && obtenir des données sur la même page

import { mapMutations, mapState } from 'vuex'

Recommandations associées :

Apprenez le vuex simple et la modularisation

Vue.js-vuex (gestion de l'état)

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!