Categoría oficial aplicación de gestión del estado Flux

Dado que el estado de la distribución dispersa en la interacción entre muchos componentes y conjuntos, complejidad de la aplicación a gran escala está creciendo constantemente. Para resolver este problema, Vue ofertas  vuex : Nos hemos inspirado en la biblioteca de gestión del estado Elm. vuex incluso integrado en las  VUE-DevTools , requerir ninguna configuración para ser depuración viaje en el tiempo (tiempo de viaje de la depuración) .

 

A menudo se pasa por alto es que, en la solicitud original Vue 数据objeto fuente real - al tener acceso al objeto de datos, una instancia de Vue simplemente acceso al proxy. Por lo tanto, si tiene que ser compartida entre varias instancias de un estado, puede simplemente ser logrado mediante el mantenimiento de un conjunto de datos compartidos:

const sourceOfTruth = {}

const vmA = new Vue({
  data: sourceOfTruth
})

const vmB = new Vue({
  data: sourceOfTruth
})

Ahora, cuando  sourceOfTruth se producen cambios, vmA y  vmB se actualizarán automáticamente las referencias a su punto de vista. Subconjuntos son cada instancia será por  this.$root.$data la visita. Ahora tenemos una fuente de datos única, sin embargo, el depurador se convertirá en una pesadilla. Cualquier momento, en cualquier parte de nuestra aplicación,

Después de cualquier cambio de datos, el cambio no será dejado fuera de la grabación.

Para resolver este problema, utilizamos un simple  modo de almacenamiento :

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

Tenga en cuenta que todos los cambios en el almacén en el estado se colocan en la tienda en su acción de manejar. Esta gestión centralizada del estado puede ser más fácil entender qué tipo de mutación ocurrirá, y cómo se activan. Cuando se produce un error, vamos a tener un registro de lo que ocurrió antes de la grabación de errores.

Además, cada instancia / componente puede todavía poseen y gestionar su propio estado privado:

 

var VMA = new Vue ({
  datos: {
    privateState: {},
    sharedState: store.state
  }
})

var VMB = new Vue ({
  datos: {
    privateState: {},
    sharedState: store.state
  }
})

 

Importante tener en cuenta que no se debe reemplazar el estado original del objeto en la acción - y almacenar los componentes necesitan para hacer referencia a los mismos objetos compartidos, la mutación para poder ser observado

Luego continuamos extendiendo el acuerdo, los componentes no están autorizados para modificar directamente el estado pertenecen a la instancia de la tienda, y la acción deben ser ejecutados para distribuir tienda de notificación (expedición), evento para el cambio, por fin llegamos al  flujo  arquitectura. Los beneficios de este acuerdo es que hemos sido capaces de registrar todos los cambios de estado en la tienda, mientras que el logro registro puede hacer para el cambio (mutación), guardar una instantánea del estado, herramientas avanzadas de depuración a la historia hacia atrás rollo de viajes / hora.