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

女爷i 2022-10-01 06:41 155阅读 0赞

## 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层级分明。

**下一章分析一下脉络**

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

转载于:https://juejin.im/post/5c9315986fb9a070c5511052