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

525 阅读3分钟

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

下一章分析一下脉络

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

个人公众号:咸鱼正翻身