Vuex 十分简单好用，没用过难免会有神秘感，以致于往往就高估了其使用难度，其实也就那么回事，没什么高大上的。
Vuex 是什么
Vuex 是专门为 Vue.js 设计的状态管理库，它采用集中式存储管理应用的所有组件的状态。
状态管理是什么
状态管理并不是什么神奇的概念，其实你一直都在做，即便你从来没了解过状态管理的概念。
我们先看文档里的示例，一个 Vue 计数应用：
new Vue({
// state
data() {
return {
count: 0
};
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment() {
this.count++;
}
}
});
这个应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
这是一个状态自管理应用，状态自管理？可以这样理解，state，view，action，三部分都写在了组件内，状态由应用组件各自管理，即自己的状态自己管理。
而我们常说的状态管理，往往是指外部管理，目的是对状态和组件进行分离，具体到 Vuex 里的表现就是：把应用的所有组件的状态抽取出来，以一个全局单例模式在应用外部采用集中式存储管理。
看来，状态管理并不是新鲜的东西，不过就是把内部对 state 部分的操作，都拿到外部去罢了，事实也确实如此。
为什么需要状态管理
很多人最初喜欢用 Vue，React 这类框架，大概都是因为框架的响应式特性——当数据改变时，视图会进行重新渲染。这其实正是框架解决的最核心的问题。
image
1. view 显示了 state
2. 用户在 view 上操作，会触发 action 去改变 state
3. state 的改变，导致 view 层再渲染
有没有发现一个有趣的问题，在这个单向流动的过程中，
- 步骤 1 和 步骤 3 已经由 Vue 的响应式特性来做了，我们并不关心其实现细节。
- 步骤 2 是我们参与的地方，这正是状态管理的部分。
既然我们并不关心 view 层是如何自动渲染的，为什么我们不把状态管理和 view 层的代码分离开，分开的好处显而易见，比如我们可以随时换掉 view 层的实现，而不用修改状态管理部分的任何代码，这个理由足够让我们单独对状态进行管理。
为什么需要 Vuex
对于简单的状态管理，一个简单的 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 = "";
}
};
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
});
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
});
- 所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。
- 此外，每个实例/组件仍然可以拥有和管理自己的私有状态：
image
接着我们继续延伸约定，
- 组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变
这其实已经是 Flux 架构，这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。
Vuex 正是借鉴了 Flux、Redux 等，为了更好地在组件外部管理状态，显然我们需要 Vuex。
Flux 架构就像眼镜
Flux 架构就像眼镜：您自会知道什么时候需要它。
近视了就需要戴眼镜了，近视 100 度你可能不需要，200 度你可能也不需要，不要着急，总有一个度数会让你带上它。
网友评论