Vuex 源码学习(一)
(一)Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,
并以相应的规则保证状态以一种可预测的方式发生变化。 —— 来自 Vuex 官方文档的介绍
可以这样理解: 整个Vue程序中,将所有的状态和其管理全部集中在一个单例 Store树中,
所有的逐渐都可以通过 Store 树来访问状态。
React 也有专门的 Redux,也是依照 FaceBook 提出的Flux ”单向数据流“理念。
Action ==》 dispatch===》Store====》 View
Vuex 状态管理的核心是:
(1)所有的数据更改都必须通过 mutaions 提交;
(2)store.commit() 来调用,或者在全局注入 store 之后,在任何地方都可以吃通过 this.$store.commit() 来定义提交方法;
(3)action 参与异步状态管理;
(4)getter 可以在既有的状态基础上派生出新的状态。
(二)源码解读
Vuex 源码加注释 <1千行。
1、整体结构:
,Vuex 对外暴露的API 如下图:
2、Store 的 基本用法
构建使用 Vuex.Store方法如下:
var store = new Vuex.Store({
modules: {
acceptStore,
applyStore
}, // 数据状态模块
strict:false, // 是否使用严格模式
plugins:[] // 插件
});
由于 Vuex 是多模块状态数据集中管理,对modules的处理便是重中之重。
一个Store模块本质上返回的便是一个对象,这个对象中包含了如下属性:
namespaced: 是否启用命名空间的模块模式,
state:当前Store模块全部的数据集
mutations:类似于事件,提交mutation是更改store状态的唯一方法,且必须是同步函数
actions: 提交状态数据至mutation,可以包含任意异步操作,通过store.commit 分发
getters:store的计算属性,根据依赖项被缓存起来,当依赖项发生改变,则重新计算
3、Store的初始化
Vuex源码是采用ES6语法书写的,如下:
很明显可以看出,在 class Store 的构造函数 constructor() 中,就是对 Store 的初始化。
12 行---- constructor( options = { } ) 传入了 默认参数,一个空对象。
因为 Vuex 是基于 Vue 的, 判断 Vue.js 是否被引入 以及 Vuex 中的 Vue 是否被成功初始化,
否则 对当前模块中 Vue 进行初始化。
如果当前 Vuex.version>=2,则在 Vue 生命周期 “beforeCreate” 阶段时, 执行 vuexInit()。
const options = this.$options ,这里的 this 是 Vue 组件实例。
if(options.store) { ...} ,由此可见,在 Vue 实例化时,参数 store 名称不可更改。
new Vue({
store,
render: h => h(App)
}).$mount('#app')
如果 并且 给 Vue 组件 新增一个属性 store 。
这也是为什么,我们可以在 Vue 组件中,使用 this.$store.commit('acceptStore/SET_MENU_LIST',val) 的原因。
Vuex 源码学习(一)的更多相关文章
- Vuex 源码学习(二)
Vue加载后,将Vuex 加载到 Vue对象上后,初始化Store. (一) Store的参数的定义 其中 action 与 mutation 的订阅者 用 数组存储,而其属性都是用对象存储的. 考虑 ...
- 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构
1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 项目地址:https://github.com/biaochenxuying/vu ...
- Java集合专题总结(1):HashMap 和 HashTable 源码学习和面试总结
2017年的秋招彻底结束了,感觉Java上面的最常见的集合相关的问题就是hash--系列和一些常用并发集合和队列,堆等结合算法一起考察,不完全统计,本人经历:先后百度.唯品会.58同城.新浪微博.趣分 ...
- jQuery源码学习感想
还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...
- MVC系列——MVC源码学习:打造自己的MVC框架(四:了解神奇的视图引擎)
前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
- MVC系列——MVC源码学习:打造自己的MVC框架(三:自定义路由规则)
前言:上篇介绍了下自己的MVC框架前两个版本,经过两天的整理,版本三基本已经完成,今天还是发出来供大家参考和学习.虽然微软的Routing功能已经非常强大,完全没有必要再“重复造轮子”了,但博主还是觉 ...
- MVC系列——MVC源码学习:打造自己的MVC框架(二:附源码)
前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...
- MVC系列——MVC源码学习:打造自己的MVC框架(一:核心原理)
前言:最近一段时间在学习MVC源码,说实话,研读源码真是一个痛苦的过程,好多晦涩的语法搞得人晕晕乎乎.这两天算是理解了一小部分,这里先记录下来,也给需要的园友一个参考,奈何博主技术有限,如有理解不妥之 ...
- 我的angularjs源码学习之旅2——依赖注入
依赖注入起源于实现控制反转的典型框架Spring框架,用来削减计算机程序的耦合问题.简单来说,在定义方法的时候,方法所依赖的对象就被隐性的注入到该方法中,在方法中可以直接使用,而不需要在执行该函数的时 ...
随机推荐
- xml读取一行数据
#include<map>#include<iostream>#include<fstream>#include<string>using namesp ...
- HTML+CSS学习任务清单
HTML部分:掌握HTML的全部语法,他的主体结构,超连接及常用标记的使用 CSS部分:掌握CSS的三种选择器的使用,明白如何使用DIV+CSS进行网页布局,搞清楚浮动问题! 1,HTML的语法(包括 ...
- win10 安装Node.js 报错:2503
解决方法: 使用管理员打开CMD
- 对抗栈帧地址随机化/ASLR的两种思路和一些技巧
栈帧地址随机化是地址空间布局随机化(Address space layout randomization,ASLR)的一种,它实现了栈帧起始地址一定程度上的随机化,令攻击者难以猜测需要攻击位置的地址. ...
- ASP.NET Core的身份认证框架IdentityServer4(1)-特性一览
IdentityServer4是ASP.NET Core的一个包含OpenID和OAuth 2.0协议的框架.OpenID和OAuth 的区别请看 https://www.zhihu.com/ques ...
- header操作cookie
root@kl20080094:~# curl -I "http://www.xxx.com" HTTP/1.1 200 OK Server: nginx/0.8.53 Date: ...
- Problem F: 多少个最大值?
Description 输入若干个int类型的整数,求它们的最大值及其个数. Input 输入 若干个int类型的整数,至文件尾为止. Output 输出只有一行:There are # maximu ...
- 搭建本地Tomcat
1.下载自己需要的版本我安装的Tomcat8(https://tomcat.apache.org/). 2.根据自己的电脑下载需要的系统版本.我的电脑是Windows64位的操作系统 3.选择一个目录 ...
- C#递归查询
一.sql --构造测试数据: 只作演示用 CREATE TABLE [dbo].[Tim_LinqTable]( [Id] int PRIMARY KEY IDENTITY(1,1) NOT NUL ...
- oracle数据库冷备中的手工备份和恢复
我的操作系统是red hat5.5 32位系统oracle11g 以我的系统为例: 冷备状态下,数据库必须是关闭的,但是我们现在要做一个实验,在开库的状态下分别查询出: 1.show paramete ...