Vue review review

https://juejin.im/post/5e8f5c3c6fb9a03c6f66fb28
# ¿Qué es VueX?
** Modo de gestión de estado ** desarrollado para aplicaciones vue.js. vuex es un modelo de gestión de estado


* estado, la fuente de datos que impulsa la aplicación;
* vista, que asigna el estado a la vista de manera declarativa;
* acciones, que responden a los cambios de estado causados ​​por la entrada del usuario en la vista.
! [] (https://user-gold-cdn.xitu.io/2020/4/10/1716010dca30e154?w=1280&h=866&f=png&s=25103);


### ¿Por qué usar vuex?

> Para la pregunta uno, el método de pasar parámetros será muy engorroso para componentes anidados de múltiples capas, y no tiene poder para la transferencia de estado entre componentes hermanos.
Para el problema dos, a menudo utilizamos múltiples copias del componente padre-hijo para hacer referencia directa o cambiar y sincronizar el estado a través de eventos. Estos patrones anteriores son muy frágiles y generalmente conducen a un código que no se puede mantener.

>

! [] (https://user-gold-cdn.xitu.io/2020/4/7/17153cee622785f3?w=701&h=551&f=png&s=8112);

 

Ciclo de vida
antes de crear, creado, beformMount, montado, antes de actualizar, actualizado, antes de destruir, destruido. Mantener función de
enlace de ciclo de vida: activada, desactivada. El
uso de `<keep-alive>` mantendrá los datos en la memoria, si lo desea Para obtener los datos más recientes al ingresar a la página esta vez, debe activarse en `activado '


# Vista del enrutador

### [¿La diferencia entre \ $ router y $ route? ] (https://www.cnblogs.com/czy960731/p/9288830.html)
> el enrutador es un objeto de VueRouter, a través de Vue.use (VueRouter) y el constructor VueRouter para obtener un objeto de instancia de enrutador, este objeto es Un objeto global, que contiene todas las rutas, contiene muchos objetos y atributos clave.

### [La diferencia entre this. \ $ Route.params y this. \ $ Route.query of vue? ] (https://www.cnblogs.com/happybread/p/10156869.html)
** 1.este uso de $ route.query **

A. Parámetros de paso:
`` `
this. $ Router.push ({
ruta: '/ monitor',
consulta: {
id: id,
}
})
` `
B. Obtención de parámetros:
this. $ Route.query.id
C 、 En forma de url (con parámetros en url)
http://172.19.186.224:8080/#/monitor?id=1
D. Al transferir parámetros entre páginas por enrutamiento, actualice la página que transfiere parámetros después del salto, Los datos también mostrarán la existencia (encontré este problema en el proyecto)

** 2. Uso de this. $ Route.params **
A. Parámetros de paso:
`` `
this. $ Router.push ({
name: 'monitor',
params: {
id: id,
}
})
` ``
B 、 Obtenga parámetros:
this. $ Route.params.id
C, en forma de url (sin parámetros en url)
http://172.19.186.224:8080/#/monitor
D, al pasar parámetros entre páginas por salto de ruta , Actualice la página del parámetro pasado después del salto, los datos no existen (este problema se encuentra en el proyecto)

 

Supongo que te gusta

Origin www.cnblogs.com/YangJonathan/p/12676751.html
Recomendado
Clasificación