1. Vue状态管理的官方实现——Vuex(类似Flux)
状态管理就是，把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。
由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex：其中受到 Elm 启发的状态管理库。vuex 也集成到了 vue-devtools
Flux 是一种架构思想，类似于 MVC 、MVVM 等。
Flux 把一个应用分成四部分:
- View：视图层
- Action：动作，即数据改变的消息对象（可通过事件触发、测试用例触发等）
Store 的改变只能通过 Action，具体 Action 的处理逻辑一般放在 Store 里。 Action 对象包含 type （类型）与 payload （传递参数）
- Dispatcher：派发器，接收 Actions ，发给所有的 Store
- Store：数据层，存放应用状态与更新状态的方法，一旦发生变动，就提醒 Views 更新页面
2.使用简单状态管理——store 模式
经常被忽略的是，Vue 应用中原始 data 对象的实际来源——当访问数据对象时，一个 Vue 实例只是简单的代理访问。
- 所以，如果有一个状态需要被多个实例共享，可以简单地通过维护一份数据来实现共享：
var sourceOfTruth = {};
var vmA = new Vue({
data: sourceOfTruth
});
var 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 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 日志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 去改变，最终达成了 Flux 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 变更，同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具。
