https://juejin.im/post/5e8f5c3c6fb9a03c6f66fb28
# What is VueX?
** State management mode ** developed for vue.js applications. vuex is a state management model
* state, the data source that drives the application;
* view, which maps state to the view in a declarative manner;
* actions, which respond to state changes caused by user input on the view.
! [] (https://user-gold-cdn.xitu.io/2020/4/10/1716010dca30e154?w=1280&h=866&f=png&s=25103);
### Why use vuex?
> For question one, the method of passing parameters will be very cumbersome for multi-layer nested components, and it is powerless for the state transfer between sibling components.
For problem two, we often use multiple copies of the parent-child component to directly reference or change and synchronize the state through events. These patterns above are very fragile and usually lead to unmaintainable code.
>
;
Lifecycle
beforeCreate, created, beformMount, mounted, beforeUpdaete, updated, beforeDestroy, destroyed. Keep
-alive lifecycle hook function: activated, deactivated.
Using `<keep-alive>` will keep the data in memory, if you want to To get the latest data when entering the page this time, it needs to be activated in `activated`
# Router view
### [The difference between \ $ router and $ route? ] (https://www.cnblogs.com/czy960731/p/9288830.html)
> router is an object of VueRouter, through Vue.use (VueRouter) and VueRouter constructor to get a router instance object A global object, which contains all the routes contains many key objects and attributes.
### [The difference between this. \ $ route.params and this. \ $ route.query of vue? ] (https://www.cnblogs.com/happybread/p/10156869.html)
** 1.this. $ route.query usage **
A. Passing parameters:
`` `
this. $ Router.push ({
path: '/ monitor',
query: {
id: id,
}
})
` ``
B. Obtaining parameters:
this. $ Route.query.id
C 、 In the form of url (with parameters in url)
http://172.19.186.224:8080/#/monitor?id=1
D. When transferring parameters between pages by routing, refresh the page that transfers parameters after jumping The data will also show the existence (encountered this problem in the project)
** 2. Use of this. $ Route.params **
A. Passing parameters:
`` `
this. $ Router.push ({
name: 'monitor',
params: {
id: id,
}
})
` ``
B 、 Get parameters:
this. $ Route.params.id
C, in the form of url (without parameters in url)
http://172.19.186.224:8080/#/monitor
D, when passing parameters between pages by route jump , Refresh the page of the parameter passed after the jump, the data does not exist (this problem is encountered in the project)