资讯专栏INFORMATION COLUMN

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

livem / 2304人阅读

摘要:我们通常称之为状态管理模式,用于解决组件间通信的以及多组件共享状态等问题。创建指定命名空间的辅助函数,总结的功能首先分为两大类自己的实例使用为组件中使用便利而提供的辅助函数自己内部对数据状态有两种功能修改数据状态异步同步。

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

下一章分析一下脉络

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102768.html

相关文章

  • Vuex源码学习(二)脉络梳理

    摘要:各位看官没看过功能梳理的可以先阅读下源码学习一功能梳理前车之鉴有了源码学习的经验,每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一遍源代码。大体了解这个源代码的脉络,每个阶段做了什么,文件目录的划分。 各位看官 没看过功能梳理的可以先阅读下Vuex源码学习(一)功能梳理. 前车之鉴 有了vue-router源码学习的经验,每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一...

    chenjiang3 评论0 收藏0
  • [源码学习] Vuex

    摘要:为了更清楚的理解它的原理和实现,还是从源码开始读起吧。结构梳理先抛开,的主要源码一共有三个文件,,初始化相关用到了和我们使用创建的实例并传递给的根组件。这个方法的第一个参数是构造器。的中,在保证单次调用的情况下,调用对构造器进入了注入。 原文链接 Vuex 作为 Vue 官方的状态管理架构,借鉴了 Flux 的设计思想,在大型应用中可以理清应用状态管理的逻辑。为了更清楚的理解它的原理和...

    FreeZinG 评论0 收藏0
  • 推送近期三波关于Vue.js的资讯

    摘要:原文来自集前端最近很火的框架资源定时更新,欢迎一下。推送自己整理近期三波关于的资讯这里就抛砖引玉了,望有更屌的资源送助攻。 原文来自:集web前端最近很火的vue2框架资源;定时更新,欢迎Star一下。 推送自己整理近期三波关于Vue.js的资讯; 这里就抛砖引玉了,望有更屌的资源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...

    Anonymous1 评论0 收藏0
  • JavaScript - 收藏集 - 掘金

    摘要:插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins译者:jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

    izhuhaodev 评论0 收藏0
  • 2017年1月前端月报

    摘要:平日学习接触过的网站积累,以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。 平日学习接触过的网站积累,以每月的形式发布。2017年以前看这个网址:http://www.kancloud.cn/jsfron... 概况 在线地址:http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报 提交原则: 技...

    FuisonDesign 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<