Vuex 做了什么(必读)

众所周知,当我们的应用遇到多个组件共享状态时,处理这些问题可能变得比较繁琐。如以下例子:

  • 多层嵌套组件依赖同一个状态,通过传参的方式比较繁琐,并且对于兄弟组件间的状态传递无能为力。
  • 不同组件对于同一状态都需要进行变更。

而 Vuex 的产生就是为了解决这些问题的。它将组件的共享状态抽取出来,以一个全局单例模式管理,并且不管在任何组件,都能获取状态或触发行为。Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。但是 Vuex约定,改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。但是 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块(module)。这些话都是摘自于 Vuex官网,但是看了这些介绍之后,我的内心是有一些疑问的。

  1. Store 类是怎么设计的?内部的结构以及实例化的对象是怎样的结构
  2. 为什么任何组件都能访问到 Store 单例?
  3. Store 是怎么实现响应式的?
  4. Vuex 怎么约束我们只能显式地提交 (commit) mutation去修改 Store 的状态的呢?
  5. Store 分割成 module 是怎么实现的。

那么带着这些疑问,跟随着我的脚步,一步步探索 Vuex(版本3.0.1) 的源码。在此过程中,希望你对 Vue 的一些核心概念,比如Vue 组件化的实现,响应式原理的实现、插件的安装等等有一些了解,不过我也会稍微详解下这一部分对原理。由于才疏学浅,如有错误,希望指正,互相学习!