data 获取vuex_长篇连载：Vuex源码学习（一）功能梳理

绝地灬酷狼 2023-01-03 14:23 136阅读 0赞

![b3565ef0bb3139ccc229c4f2d1241595.png][]

# **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中获取数据使用。

![869577751f9fea454e73e3ab33ba457a.png][]

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

[b3565ef0bb3139ccc229c4f2d1241595.png]: /images/20221119/b2eeb6d5e9d444c1966a63c6fc0af06c.png
[869577751f9fea454e73e3ab33ba457a.png]: https://img-blog.csdnimg.cn/img_convert/869577751f9fea454e73e3ab33ba457a.png