¿Por qué usar Vuex?

vuex.txt

 Al crear aplicaciones de gran tamaño, como las aplicaciones de una sola página (SPA), que suelen constar de muchos componentes reutilizables, se pueden volver difíciles de construir y mantener rápidamente. El intercambio de datos y el estado entre estos componentes también puede descomponerse rápidamente y ser difícil de depurar y mantener.

Al utilizar un almacén de datos de aplicaciones centralizado, el estado completo de la aplicación se puede representar en un solo lugar, lo que hace que la aplicación esté más organizada. Mediante el uso de un flujo de datos unidireccional, las mutaciones y el acceso a los datos del componente de alcance solo a los datos requeridos, se vuelve mucho más sencillo razonar sobre el rol del componente y cómo debe afectar el estado de la aplicación.

Los componentes de VueJS son entidades separadas y no pueden compartir datos entre sí fácilmente. Para compartir datos sin vuex necesitamos emit evento con datos y luego escuchar y capturar ese evento con on .

componente 1

this.$emit('eventWithDataObject', dataObject)

componente 2

this.$on('eventWithDataObject', function (dataObject) {
    console.log(dataObject)
})

Con vuex instalado, simplemente podemos acceder a sus datos desde cualquier componente sin necesidad de escuchar los eventos.

this.$store.state.myData

También podemos cambiar los datos de forma sincronizada con mutadores, utilizar las acciones asíncronos y obtener datos con funciones getter.

Las funciones de Getter podrían funcionar como funciones globales computadas. Podemos acceder a ellos desde componentes:

this.$store.getters.myGetter

Las acciones son métodos globales. Podemos enviarlos desde componentes:

this.$store.dispatch('myAction', myDataObject)

Y las mutaciones son la única forma de cambiar los datos en vuex. Podemos confirmar los cambios:

this.$store.commit('myMutation', myDataObject)

El código de Vuex se vería así

state: {
  myData: {
    key: 'val'
  }
},
getters: {
  myGetter: state => {
     return state.myData.key.length
  }
},
actions: {
  myAction ({ commit }, myDataObject) {
    setTimeout(() => {
      commit('myMutation', myDataObject)
    }, 2000)
  }
},
mutations: {
  myMutation (state, myDataObject) {
    state.myData = myDataObject
  }
}