Vuex 做了什么(必读)
众所周知,当我们的应用遇到多个组件共享状态时,处理这些问题可能变得比较繁琐。如以下例子:
- 多层嵌套组件依赖同一个状态,通过传参的方式比较繁琐,并且对于兄弟组件间的状态传递无能为力。
- 不同组件对于同一状态都需要进行变更。
而 Vuex 的产生就是为了解决这些问题的。它将组件的共享状态抽取出来,以一个全局单例模式管理,并且不管在任何组件,都能获取状态或触发行为。Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。但是 Vuex约定,改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。但是 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块(module)。这些话都是摘自于 Vuex官网,但是看了这些介绍之后,我的内心是有一些疑问的。
- Store 类是怎么设计的?内部的结构以及实例化的对象是怎样的结构
- 为什么任何组件都能访问到 Store 单例?
- Store 是怎么实现响应式的?
- Vuex 怎么约束我们只能显式地提交 (commit) mutation去修改 Store 的状态的呢?
- Store 分割成 module 是怎么实现的。
那么带着这些疑问,跟随着我的脚步,一步步探索 Vuex(版本3.0.1) 的源码。在此过程中,希望你对 Vue 的一些核心概念,比如Vue 组件化的实现,响应式原理的实现、插件的安装等等有一些了解,不过我也会稍微详解下这一部分对原理。由于才疏学浅,如有错误,希望指正,互相学习!