为什么要使用 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

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

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

this.$store.getters.myGetter

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

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

并且突变是在 vuex 中更改数据的唯一方法。我们可以提交更改：

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