24. State Management（状态管理）

状态管理

官方的状态实现

由于分散在多个组件中的多个状态以及它们之间的交互作用，大型应用程序的复杂度往往会增加。为了解决这个问题，Vue提供了vuex：我们自己的受Elm启发的状态管理库。它甚至集成到vue-devtools中，为时间旅行提供零设置访问。

React开发人员信息

如果你来自React，你可能想知道vuex与redux的比较，这是该生态系统中最流行的Flux实现。Redux实际上是视图层不可知的，所以它可以通过简单的绑定轻松地与Vue一起使用。Vuex不同之处在于它知道它在Vue应用程序中。这使得它可以更好地与Vue集成，提供更直观的API和改进的开发体验。

擦除简单的状态管理

人们常常忽略Vue应用程序中的真实来源是原始data对象--Vue实例只能代理访问它。因此，如果您有一段应该由多个实例共享的状态，则可以按身份共享它：

const sourceOfTruth = {}

const vmA = new Vue{
  data: sourceOfTruth
})

const vmB = new Vue{
  data: sourceOfTruth
})

现在，每当sourceOfTruth发生突变，都vmA与vmB将自动更新了自己的看法。每个这些实例中的子组件也可以通过访问this.$root.$data。我们现在有单一的真相来源，但调试将是一场噩梦。我们的应用程序的任何部分都可以随时更改任何数据，而不会留下任何痕迹。

为了帮助解决这个问题，我们可以采用一种商店模式：

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

请注意，所有将商店状态变更的操作都会放入商店本身。这种集中的状态管理使得更容易理解可能发生什么类型的突变以及它们是如何被触发的。现在，当出现问题时，我们还会记录导致错误发生的原因。

另外，每个实例/组件仍然可以拥有并管理自己的私有状态：

var vmA = new Vue{
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue{
  data: {
    privateState: {},
    sharedState: store.state
  }
})

重要的是要注意，您绝不应该在您的操作中替换原始状态对象 - 组件和商店需要共享对同一对象的引用，以便观察突变。

随着我们继续开发公约，其中组件始终不允许直接改变属于商店的状态，而应派发通知商店执行操作的事件，最终我们会到达Flux体系结构。这个约定的好处是我们可以记录商店中发生的所有状态突变，并实现高级调试帮助程序，例如突变日志，快照和历史记录重新编辑/时间旅行。

这让我们回到vuex的圈子内，所以如果你已经读了这么多，是时候尝试一下了！