Vue.js 为什么要使用Vuex？

示例

当构建大型应用程序（例如通常由许多可重用组件组成的单页应用程序(SPA)）时，它们很快就会变得难以构建和维护。这些组件之间的数据和状态共享也会迅速中断，并且变得难以调试和维护。

通过使用集中式应用程序数据存储，可以在一个地方表示整个应用程序状态，从而使应用程序更有组织性。通过使用单向数据流，变异以及通过对组件数据进行作用域限定范围，仅访问所需的数据，就可以更轻松地推断出组件角色以及它应如何影响应用程序状态。

VueJS组件是单独的实体，它们无法轻松地彼此共享数据。要在不使用vuex的情况下共享数据，我们需要对emit数据进行事件处理，然后使用对事件进行监听和捕获on。

组成部分1

this.$emit('eventWithDataObject', dataObject)

组成部分2

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

安装vuex之后，我们可以轻松地从任何组件访问其数据，而无需侦听事件。

this.$store.state.myData

我们还可以使用mutators同步更改数据，使用异步操作并使用getter函数获取数据。

Getter函数可能会用作全局计算函数。我们可以从组件访问它们：

this.$store.getters.myGetter

动作是全局方法。我们可以从组件中分派它们：

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

变异是更改数据的唯一方法，vuex.We可以提交更改：

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

Vuex代码看起来像这样

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
  }
}