Vuex源码学习（一）功能梳理

what is Vuex ?

这句话我想每一个搜索过Vuex官网文档的人都看到过，

在学习源码前，固然要有一些前提条件了。

1. 了解Vuex的做用，以及他的使用场景。
2. 会使用Vuex，对基本API熟练掌握。
3. 有一颗求知的心里（balabla的）。

Vuex咱们一般称之为状态管理模式，用于解决组件间通讯的以及多组件共享状态等问题。官网文档中注明的场景十分影响框架开发的总体脉络，也就是这个框架从一开始作就想解决这些问题，

Vuex的核心API有哪些？

（=》 符号代之类比 ->符号表明 在vuex提供的辅助函数）

1. state ： 数据仓库，全部的数据都存在这里。 =》 vue对象的data。

2. getters ：能够搭配仓库中的数据结合起来联动相应的数据 =》 vue的计算属性 -> mapGetters

3. mutation ：更新数据仓库中的数据 -> mapMutations

4. action ：负责异步操做（网络请求、定时器等内容）调用mutation来更新数据 -> mapActions

5. modules : 模块模式 提供了命名空间 使状态管理支持了树形结构。（画重点）

把这些API分红俩大类：

1. 负责向Vuex中输入。
2. 从Vuex中获取数据使用。

   

action 与 mutation 解决了全部向Vuex更新数据的方式（同步与异步）。

getters 与 state 解决了vue组件（也能够是vuex内部）从Vuex获取数据。

modules呢 固然不属于这两大类，它是一个基石，他让Vuex有了树形结构， 你能够将Vuex组织成一个模块，每一个模块都有action、mutation、getters、state等方法。模块之间有了父子关系。

以上这些都是针对于Vuex内部的一些方法，能够在Vuex的实例上使用。 Vuex的实例通常都会挂载到Vue对象上。

辅助函数

为了方便使用Vuex还提供了一组辅助函数

在使用Vue进行开发的时候，咱们有大量的states、getters、mutations、actions要使用，每一个都使用vuex实例去调用会浪费不少代码，尤为是在使用了命名空间（namespaced）以后，vuex实例去调用这些方法都要加上对应的命名空间，因此就有了如下四个方法，接收一个namespace（能够为空），也就是命名空间前缀，以及一个对象、或者数组。

1. mapState 为组件建立计算属性以返回 Vuex store 中的状态。
2. mapGetters 为组件建立计算属性以返回 getter 的返回值。
3. mapMutations 建立组件方法分发 action。
4. mapActions 建立组件方法提交 mutation。

以上几个方法都是为Vue组件遍历使用而产生的。

可是还不够极致，每一个都要写命名空间， 辅助函数还提供了createNamespacedHelpers。建立指定命名空间的辅助函数，

总结

Vuex的功能首先分为两大类：

1. Vuex本身的实例使用 getters、mutations、actions
2. Vuex为组件中使用便利而提供的辅助函数 mapGetters、mapMutations、mapActions、mapState、createNamespacedHelpers

Vuex本身内部对数据状态（state）有两种功能：

1. 修改数据状态 action：异步 mutation ： 同步。
2. 获取数据状态 getter : 能够通过计算 state ： 直接返回数据状态。

Vuex支持的模式：模块模式 modules，为Vuex提供树形结构，以及命名空间，帮助Vuex层级分明。

下一章分析一下脉络

我是一个应届生，最近和朋友们维护了一个公众号，内容是咱们在从应届生过渡到开发这一路所踩过的坑，已经咱们一步步学习的记录，若是感兴趣的朋友能够关注一下，一同加油~