常用接口

dispatch

操作行为触发方法,是唯一能执行action的方法。

actions

操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行,包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装,以支持action的链式触发。

commit

状态改变提交操作方法。对mutation进行提交,是唯一能执行mutation的方法。

mutations

状态改变操作方法。是Vuex修改state的唯一推荐方法,其他修改方式在严格模式下将会报错。该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些hook暴露出来,以进行state的监控等。

state

页面状态管理容器对象。集中存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新。

getters

state对象读取方法。图中没有单独列出该模块,应该被包含在了render中,Vue Components通过该方法读取全局state对象。

数据交互

Vue组件接收交互行为,调用dispatch方法触发action相关处理,若页面状态需要改变,则调用commit方法提交mutation修改state,通过getters获取到state新值,重新渲染Vue Components,界面随之更新。

源码解析

install

若是首次加载,将局部Vue变量赋值为全局的Vue对象,并执行applyMixin方法

applyMixin

首先判断vue版本,如果是2.x.x版本,则将vuexInit混入beforeCreate;

否则,将vuexInit替换对象原型的_init方法,实现注入;

vuexInit

将初始化Vue根组件时传入的store设置到this对象的$store属性上;

子组件从其父组件引用$store属性,层层嵌套进行设置;

在任意组件中执行 this.$store 都能找到装载的那个store对象;

Store

构造器

在store构造函数中执行环境判断,以下都是Vuex工作的必要条件:

已经执行安装函数进行装载;

支持Promise语法;

通过new的方式创建store;

数据初始化

module树构建

ModuleCollection主要将传入的options对象整个构造为一个module对象;

循环调用 this.register([key], rawModule, false) 为其中的modules属性进行模块注册,使其都成为module对象,最后options对象被构造成一个完整的组件树;

dispatch与commit

将dispatch与commit调用的this绑定为store对象本身,否则在组件内部this.dispatch时的this会指向组件的vm

利用_withCommit方法执行本次批量触发mutation处理函数,并传入payload参数。执行完成后,通知所有_subscribers(订阅函数)本次操作的mutation对象以及当前的state状态

_withCommit

_withCommit是一个代理方法,所有触发mutation的进行state修改的操作都经过它,由此来统一管理监控state状态的修改

installModule

根目录注册时,并不会执行条件中的方法

registerMutation方法中,获取store中的对应mutation type的处理函数集合,将新的处理函数push进去。这里将我们设置在mutations type上对应的 handler 进行了封装,给原函数传入了state。在执行 commit('xxx', payload) 的时候,type为 xxx 的mutation的所有handler都会接收到state以及payload,这就是在handler里面拿到state的原因;

action和getter的注册也是同理的;

action handler比mutation handler以及getter wrapper多拿到dispatch和commit操作方法,因此action可以进行dispatch action和commit mutation操作;

resetStoreVM

vue系列课程

最近会陆续的对vue进行源码分析,一系列课程如下:

state系列

lifecycle系列

event系列

render系列

inject/provide系列

plugins系列

组件系列

指令系列

算法系列

其他

vuex 源码分析_vue源码解析之vuex原理相关推荐

  1. Android源码分析--MediaServer源码分析(二)

    在上一篇博客中Android源码分析–MediaServer源码分析(一),我们知道了ProcessState和defaultServiceManager,在分析源码的过程中,我们被Android的B ...

  2. 【Android 电量优化】JobScheduler 源码分析 ( JobServiceContext 源码分析 | 闭环操作总结 | 用户提交任务 | 广播接收者接受相关广播触发任务执行 )★

    文章目录 一.JobServiceContext 引入 二.JobServiceContext 源码分析 三.用户在应用层如何使用 JobScheduler 四.用户提交任务 五.广播接收者监听广播触 ...

  3. Linux内核 eBPF基础:kprobe原理源码分析:源码分析

    Linux内核 eBPF基础 kprobe原理源码分析:源码分析 荣涛 2021年5月11日 在 <Linux内核 eBPF基础:kprobe原理源码分析:基本介绍与使用>中已经介绍了kp ...

  4. k8s源码分析--kube-scheduler源码(一)

    版本:v1.13.0 启动分析 kubernetes基础组件的入口均在cmd目录下,kube-schduler入口在scheduler.go下. kubernetes所有的组件启动采用的均是comma ...

  5. k8s client-go源码分析 informer源码分析(3)-Reflector源码分析

    k8s client-go源码分析 informer源码分析(3)-Reflector源码分析 1.Reflector概述 Reflector从kube-apiserver中list&watc ...

  6. xf86-video-intel源码分析1 —— 源码目录结构概览

    在<Spectacle/Flameshot/X11 Xlib截屏问题现象及解决方法>一文(链接如下)中提到, Spectacle/Flameshot/X11 Xlib截屏问题现象及解决方法 ...

  7. vuex 源码分析_Vuex源码解析

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 可能会有理解存在偏差的地方,欢迎提issue指出,共同 ...

  8. spring 源码分析(1)-xml文件解析

    我们在最开始接触spring的时候,看到不少书spring入门的例子如下 ApplicationContext atx = new ClassPathXmlApplicationContext(&qu ...

  9. Okhttp源码分析以及Google Gson解析json数据实例

    Okhttp Github的Okhttp OkHttp是一个高效的HTTP客户端,它有以下默认特性: 支持HTTP/2,允许所有同一个主机地址的请求共享同一个socket连接 透明的GZIP压缩减少响 ...

最新文章

  1. C++ 笔记(30)— 友元函数与友元类
  2. Atitit qzone qq空间博客自动点赞与评论工具的设计与实现
  3. 【高级Java架构师系统学习】java如何开发安卓软件
  4. C++ Primer 5th笔记(chap 15 OOP)继承之类型转换
  5. Stereo matching code
  6. h5页面长按保存图片
  7. Android edittext限制字节数
  8. 得到application server上所有的logon user
  9. CCF 201812-2小明放学
  10. 数据预处理之独热编码
  11. 【渝粤题库】广东开放大学 建筑工程概预算 形成性考核
  12. 美国信息互换标准代码 ASCⅡ
  13. android 支付宝 授权登录,android 支付宝授权登录、获取个人信息一键接入
  14. 2020年7月 leetcode每日一题 C语言版本
  15. win7系统如何重启服务器,云骑士解决win7系统重启IIS服务的技巧介绍
  16. 为什么阿里那么难进,原来精髓在这
  17. 我手机上常用的app和常访问的网站
  18. MT7621芯片性能,MT7621路由器参数介绍
  19. AIMP3音乐播放器的漂亮皮肤-IAMP和Minimal Gray
  20. 亲身经历:一次sql缺少where条件的惨案…

热门文章

  1. 距阵乘以一个未知距阵得单位矩阵 怎么算_贷款利息怎么算,房贷车贷消费贷,利息有什么区别...
  2. unfortunately has stop
  3. 我经历过的那些奇葩用户体验(持续更新中。。。)
  4. 最优化理论公式大赏(上)
  5. 区块链如何破解供应链金融痛点
  6. 【电商】FMS财务管理系统---数据流转模块组成
  7. 机器人测钢卷直径_如何引导机器人对钢卷定位焊接?秘密就在这里
  8. 苹果手机如何关闭自动续费_微信支付宝一键关闭自动续费
  9. Python中最全的窗口操作,如窗口最大化、最小化、窗口置顶、获取缩放比例等
  10. VS coda C++、python运行与Dbug配置