【前端笔记】Vuex 是什么，为什么需要

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 这类框架，大概都是因为框架的响应式特性——当数据改变时，视图会进行重新渲染。这其实正是框架解决的最核心的问题。

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 之前发生了什么。
此外，每个实例/组件仍然可以拥有和管理自己的私有状态：

接着我们继续延伸约定，

组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变

这其实已经是 Flux 架构，这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。

Vuex 正是借鉴了 Flux、Redux 等，为了更好地在组件外部管理状态，显然我们需要 Vuex。

Flux 架构就像眼镜

Flux 架构就像眼镜：您自会知道什么时候需要它。

近视了就需要戴眼镜了，近视 100 度你可能不需要，200 度你可能也不需要，不要着急，总有一个度数会让你带上它。

本文对 Vuex 官方文档重新组织编排，尝试更好的理解状态管理。