Un, qu'est-ce que vuex
Autrement dit, c'est l'attribut partagé des données
Deuxièmement, à propos du magasin
Un "magasin" est essentiellement un conteneur qui contient la plupart de l'état de votre application.
Pour l'instant, prenons l'état comme nos données générales, donc c'est facile à comprendre ~
Trois, sur l'État
L'état est l'attribut de données global de notre projet, et ces attributs sont réactifs, ce qui signifie que lorsque l'attribut change, l'état répond dynamiquement
Quatrièmement, à propos de Getter
Getter peut nous obliger à dériver un état de l'état dans le magasin, comme le filtrage et le comptage de la liste, etc.
Vuex nous permet de définir "getter" dans le magasin (qui peut être considéré comme l'attribut calculé du magasin). Tout comme le calcul des attributs,
La valeur de retour du getter sera mise en cache en fonction de sa dépendance et ne sera recalculée que lorsque sa valeur de dépendance aura changé.
V. À propos de la mutation
La seule façon de changer l'état dans le magasin Vuex est de soumettre des mutations. Les mutations dans Vuex sont très similaires aux événements: chaque mutation a un type d'événement de chaîne et une fonction de rappel. Cette fonction de rappel est l'endroit où nous changeons réellement l'état, et il acceptera l'état comme premier paramètre
V. À propos de l'action
L'action est similaire à la mutation, la différence est (concentrez-vous dessus, de nombreux intervieweurs demanderont ~):
1. La soumission est une mutation, plutôt que de changer directement l'état.
2. Peut contenir n'importe quelle opération asynchrone.
Six, sur le module
En raison de l'utilisation d'un seul arbre d'état, tout l'état de l'application sera concentré dans un objet relativement grand. Lorsque l'application devient très complexe, l'objet de stockage peut devenir assez gonflé. Afin de résoudre les problèmes ci-dessus, Vuex nous permet de diviser le magasin en modules. Chaque module a son propre état, sa mutation, son action, son getter et même ses sous-modules imbriqués répartis de la même manière de haut en bas
Sept, comment utiliser
Nous avons parlé de tant de connaissances théoriques, alors comment les utiliser en réalité, jetons un coup d'œil:
La première consiste à installer
（1） npm install vuex --save
(2) Nouvel entrepôt
Créez un nouveau dossier dans le répertoire src, nous le nommons magasin, puis créons un fichier js sous le dossier, nous l'appelons toujours magasin, la capture d'écran semble plus pratique.
Commencez ensuite à introduire dans main.js
L'installation et l'introduction sont très bien, jouons
Dans le fichier de magasin que vous venez de créer
import Vue from 'vue'
importer Vuex depuis 'vuex'
Vue.use (Vuex)
Sauvegardons deux variables pour voir
Trouver une page et l'imprimer dans creat
creat （） {
console.log (ceci)
}
Eh bien, nous avons trouvé l'entrepôt que nous venons de créer
Venez voir ce qu'il y a dans l'entrepôt
Voir l'état et la mutation que nous avons définis
Alors, comment obtenons-nous les données?
Nous pouvons tous l'imprimer, vous ne devriez pas être perplexe si vous êtes intelligent
1. Prenons le nom de l'État comme exemple
creat （） {
console.log (this. $ store.state.name)
}
Vous voyez, les données sont imprimées, est-ce super simple
J'ai les données, que dois-je faire pour le changer? Ne vous inquiétez pas, nous avons une mutation
Ceci est la méthode que nous avons définie plus tôt
Écrivons une fonction sur d'autres pages
Définissez ensuite la valeur de msg dans les données
Ensuite, nous appelons changeName
Avez-vous vu nos données modifiées?
Voici juste une brève introduction à vuex, amenant tout le monde à démarrer. Pour plus de détails, consultez la documentation officielle, bye ~
Auteur: Sha Sha Sha Nana
lien: https: //www.jianshu.com/p/cba77015cd47
Source: Jane livres
sont la propriété de l'auteur. Pour la reproduction commerciale, veuillez contacter l'auteur pour autorisation, et pour la reproduction non commerciale, veuillez indiquer la source.
