8.状态管理

荒流2021年10月13日大约 2 分钟约 495 字

Vue 应用中原始 data 对象的实际来源经常被忽略——当访问数据对象时，一个 Vue 实例只是简单的代理访问。这导致了，如果你有一处需要被多个实例间共享的状态，那么可以很简单地通过维护一份数据来实现共享：

var sourceOfTruth = {}

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

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

现在当 sourceOfTruth 发生变更，vmA 和 vmB 都将自动地更新它们的视图。子组件们的每个实例也会通过 this.$root.$data 去访问。

然而，这对调试来说将会造成噩梦——任何时间，应用中的任何部分，在任何数据改变之后，都不会留下变更的痕迹。

为了解决这个问题，Vue提供了一个简单的 store 模式：

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

现在所有 store 中 state 的变更，都放置在 store 自身的 action 中去管理。这种集中式状态管理更易理解将会发生哪种类型的变更，以及它们是如何被触发的，当错误出现时，也会有一个 log 记录 bug 之前发生了什么。

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

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

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

注意你不应该在 action 中替换原始的状态对象 ——组件和 store 需要引用同一个共享对象，更改才能够被观察到。

组件不允许直接变更属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件从而通知 store 去改变。这样的好处是我们能够记录所有 store 中发生的 state 变更，同时实现能做到记录变更、保存状态快照、历史回滚的先进的调试工具。

8.状态管理

详情