Análisis: esta pregunta examina la aplicación de Vuex y el mecanismo de monitoreo de cambios de datos dentro de Vue
解答: Primero determine qué problema va a resolver Vuex Vuex es un marco que surgió para resolver el estado compartido entre componentes.Hay varios elementos que constituyen la clave de Vuex, acciones de mutaciones de estado (estado),
el estado representa los datos del estado que deben compartirse
Mutaciones significa que el conjunto de métodos para cambiar el estado solo puede ser actualizaciones sincrónicas y no puede escribir solicitudes asincrónicas como ajax
Acciones Si necesita realizar una solicitud asincrónica, puede iniciarla en acciones y enviarla a mutaciones para actualizaciones sincrónicas.
Es decir, el estado es responsable de administrar el estado, la mutación es responsable de actualizar sincrónicamente el estado, la acción es responsable de obtener datos de forma asincrónica y enviarlos a la mutación.
Entonces, el componente que monitorea los cambios de datos de Vuex es monitorear los cambios de estado en Vuex.
第一种方案Podemos hacer esto en el componente a través del método de observación del componente , porque el componente puede asignar los datos de estado a las propiedades calculadas del componente,
Luego supervise las propiedades calculadas del mapeo y el código es el siguiente
// Datos de
estado en estado vuex : {
count: 0
},
// Asignar datos de estado en el componente A al atributo calculado calculado
: {
// this. $ Store.state.count
// mapState convierte el conteo global en uso directo Data
... mapState (['count'])
}
// Un componente monitorea los cambios de las propiedades de cálculo de conteo
watch: {
// watch puede monitorear datos de datos o conteo de datos vuex global
() {
// usa sus propios datos Cuente
esto.changeCount ++
}
}
第二种方案El objeto de la tienda en sí mismo en vuex proporciona una watchfunción, que se puede usar para monitorear
-
watch (fn: función, devolución de llamada: función, opciones ?: objeto): función
Responsive escucha fnvalor de retorno, la función de devolución de llamada cuando cambia el valor. fnRecibe el estado de la tienda como primer parámetro y su captador como segundo parámetro. El último parámetro recibido indica un objeto opcional de los vm.$watchparámetros Vue del método.
Código
created () {
this. $ store.watch ((state, getters) => {
return state.count
}, () => {
this.changeCount ++
})
}