https://juejin.im/post/5e8f5c3c6fb9a03c6f66fb28
# Qu'est-ce que VueX?
** Mode de gestion des états ** développé pour les applications vue.js. vuex est un modèle de gestion d'état
* état, la source de données qui pilote l'application;
* vue, qui mappe l'état à la vue de manière déclarative;
* actions, qui répondent aux changements d'état provoqués par l'entrée de l'utilisateur sur la vue.
! [] (https://user-gold-cdn.xitu.io/2020/4/10/1716010dca30e154?w=1280&h=866&f=png&s=25103);
### Pourquoi utiliser vuex?
> Pour la première question, la méthode de passage des paramètres sera très lourde pour les composants imbriqués multicouches, et elle est impuissante pour le transfert d'état entre les composants frères.
Pour le problème deux, nous utilisons souvent plusieurs copies du composant parent-enfant pour référencer directement ou modifier et synchroniser l'état via des événements. Ces modèles ci-dessus sont très fragiles et conduisent généralement à un code non maintenable.
>
! [] (https://user-gold-cdn.xitu.io/2020/4/7/17153cee622785f3?w=701&h=551&f=png&s=8112);
Cycle de vie
avantCréer, créer, beformMount, monté, avantUpdaete, mis à jour, avantDestroy, détruit.Garder
-alive lifecycle hook function: activé, désactivé. L'
utilisation de `<keep-alive>` gardera les données en mémoire, si vous le souhaitez Pour obtenir les dernières données lors de la saisie de la page cette fois, elle doit être activée dans `activé`
# Vue Router
### [La différence entre \ $ router et $ route? ] (https://www.cnblogs.com/czy960731/p/9288830.html)
> router est un objet de VueRouter, via Vue.use (VueRouter) et le constructeur VueRouter pour obtenir un objet instance de routeur, cet objet est Un objet global, qui contient toutes les routes, contient de nombreux objets et attributs clés.
### [La différence entre ce. \ $ Route.params et cette. \ $ Route.query of vue? ] (https://www.cnblogs.com/happybread/p/10156869.html)
** 1. ceci. $ route.query usage **
A. Passage des paramètres:
`` ``
this. $ Router.push ({
path: '/ monitor',
query: {
id: id,
}
})
`` `` B.Obtention des
paramètres:
this. $ Route.query.id
C 、 Sous forme d'URL (avec des paramètres dans l'URL)
http://172.19.186.224:8080/#/monitor?id=1
D. Lors du transfert de paramètres entre les pages par routage, actualisez la page qui transfère les paramètres après le saut, Les données montreront également l'existence (rencontré ce problème dans le projet)
** 2. Utilisation de ceci. $ Route.params **
A. Passage des paramètres:
``
this. $ Router.push ({
name: 'monitor',
params: {
id: id,
}
})
``
B 、 Obtenir les paramètres:
ceci. $ Route.params.id
C, sous forme d'url (sans paramètres dans l'url)
http://172.19.186.224:8080/#/monitor
D, lors du passage de paramètres entre les pages par saut de route , Actualise la page qui a passé le paramètre après le saut, les données n'existent pas