Vuex 入门前的小菜 - “Vue 中的简单状态共享机制实现”

PS：本文主要内容来自于官方文档，外加个人理解，作为个人学习记录。

1. 什么是状态共享机制？

首先说一下这里的“状态”，状态主要是指 Vue 组件的 data 字段。

状态共享机制在开发中简单通俗点说就是如何科学管理维护多组件之间的共享数据。这在使用Vue这类以组件为基础搭建的项目中非常常见。简单的使用场景可以参考本文内容（本文也是来自原 Vue 官方资料），复杂的场景请转移至 Vuex 的学习。

说到这里不得不提一下 Vue 的父子组件的数据交流【详细内容参考这两个部分：通过 Prop 向子组件传递数据、通过事件向父级组件发送消息】，父子组件的数据交流是非常常见的开发需求，上述传统方法，只适合联系紧密的父子，不适合兄弟组件，也同样不适合复杂的多层关联。所以组件之间的数据关联就需要我们采用合理的设计模式来解决，这就是本文的重点也是 Vuex 的基本核心----简单的状态共享机制实现。

2. 简单状态管理起步使用

 

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

const sourceOfTruth = {}

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

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

现在当 sourceOfTruth 发生变化，vmA 和 vmB 都将自动的更新引用它们的视图。子组件们的每个实例也会通过 this.$root.$data 去访问。现在我们有了唯一的数据来源，但是，调试将会变为噩梦。任何时间，我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录。

为了解决这个问题，我们采用一个简单的 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 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。

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

var vmA = new Vue({
  data: {
    privateState: {},    // 自己的私有状态
    sharedState: store.state    // 共享部分的状态
  }
})

var vmB = new Vue({
  data: {
    privateState: {},    // 自己的私有状态
    sharedState: store.state  // 共享部分的状态
  }
})

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

接着我们继续延伸约定，组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 Flux 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。

 

通过对上面的官方文档研究，感觉这就是菜鸟与大神的在编码设计上的规范和思维上差别，受益颇深，特此记录。

官方文档参考：

什么是“状态管理模式”？

简单状态管理起步使用