乐趣区

Vuex源码学习(一)功能梳理

what is Vuex ?
这句话我想每个搜索过 Vuex 官网文档的人都看到过,
在学习源码前,当然要有一些前提条件了。

了解 Vuex 的作用,以及他的使用场景。
会使用 Vuex,对基本 API 熟练掌握。
有一颗求知的内心(balabla 的)。

Vuex 我们通常称之为状态管理模式,用于解决组件间通信的以及多组件共享状态等问题。官网文档中注明的场景十分影响框架开发的整体脉络,也就是这个框架从一开始做就想解决这些问题,
Vuex 的核心 API 有哪些?
(=》符号代之类比 -> 符号代表 在 vuex 提供的辅助函数)

state:数据仓库,所有的数据都存在这里。=》vue 对象的 data。
getters:可以搭配仓库中的数据结合起来联动相应的数据 =》vue 的计算属性 -> mapGetters
mutation:更新数据仓库中的数据 -> mapMutations
action:负责异步操作(网络请求、定时器等内容)调用 mutation 来更新数据 -> mapActions
modules : 模块模式 提供了命名空间 使状态管理支持了树形结构。(画重点)

把这些 API 分成俩大类:

负责向 Vuex 中输入。
从 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(可以为空),也就是命名空间前缀,以及一个对象、或者数组。

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

以上几个方法都是为 Vue 组件遍历使用而产生的。
但是还不够极致,每个都要写命名空间,辅助函数还提供了 createNamespacedHelpers。创建指定命名空间的辅助函数,
总结
Vuex 的功能首先分为两大类:

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

Vuex 自己内部对数据状态(state)有两种功能:

修改数据状态 action:异步 mutation:同步。
获取数据状态 getter : 可以经过计算 state:直接返回数据状态。

Vuex 支持的模式:模块模式 modules,为 Vuex 提供树形结构,以及命名空间,帮助 Vuex 层级分明。
下一章分析一下脉络
我是一个应届生,最近和朋友们维护了一个公众号,内容是我们在从应届生过渡到开发这一路所踩过的坑,已经我们一步步学习的记录,如果感兴趣的朋友可以关注一下,一同加油~

退出移动版