(一)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 源码学习(一)的更多相关文章

  1. Vuex 源码学习(二)

    Vue加载后,将Vuex 加载到 Vue对象上后,初始化Store. (一) Store的参数的定义 其中 action 与 mutation 的订阅者 用 数组存储,而其属性都是用对象存储的. 考虑 ...

  2. 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

    1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 项目地址:https://github.com/biaochenxuying/vu ...

  3. Java集合专题总结(1):HashMap 和 HashTable 源码学习和面试总结

    2017年的秋招彻底结束了,感觉Java上面的最常见的集合相关的问题就是hash--系列和一些常用并发集合和队列,堆等结合算法一起考察,不完全统计,本人经历:先后百度.唯品会.58同城.新浪微博.趣分 ...

  4. jQuery源码学习感想

    还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...

  5. MVC系列——MVC源码学习:打造自己的MVC框架(四:了解神奇的视图引擎)

    前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...

  6. MVC系列——MVC源码学习:打造自己的MVC框架(三:自定义路由规则)

    前言:上篇介绍了下自己的MVC框架前两个版本,经过两天的整理,版本三基本已经完成,今天还是发出来供大家参考和学习.虽然微软的Routing功能已经非常强大,完全没有必要再“重复造轮子”了,但博主还是觉 ...

  7. MVC系列——MVC源码学习:打造自己的MVC框架(二:附源码)

    前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...

  8. MVC系列——MVC源码学习:打造自己的MVC框架(一:核心原理)

    前言:最近一段时间在学习MVC源码,说实话,研读源码真是一个痛苦的过程,好多晦涩的语法搞得人晕晕乎乎.这两天算是理解了一小部分,这里先记录下来,也给需要的园友一个参考,奈何博主技术有限,如有理解不妥之 ...

  9. 我的angularjs源码学习之旅2——依赖注入

    依赖注入起源于实现控制反转的典型框架Spring框架,用来削减计算机程序的耦合问题.简单来说,在定义方法的时候,方法所依赖的对象就被隐性的注入到该方法中,在方法中可以直接使用,而不需要在执行该函数的时 ...

随机推荐

  1. xml读取一行数据

    #include<map>#include<iostream>#include<fstream>#include<string>using namesp ...

  2. HTML+CSS学习任务清单

    HTML部分:掌握HTML的全部语法,他的主体结构,超连接及常用标记的使用 CSS部分:掌握CSS的三种选择器的使用,明白如何使用DIV+CSS进行网页布局,搞清楚浮动问题! 1,HTML的语法(包括 ...

  3. win10 安装Node.js 报错:2503

    解决方法: 使用管理员打开CMD

  4. 对抗栈帧地址随机化/ASLR的两种思路和一些技巧

    栈帧地址随机化是地址空间布局随机化(Address space layout randomization,ASLR)的一种,它实现了栈帧起始地址一定程度上的随机化,令攻击者难以猜测需要攻击位置的地址. ...

  5. ASP.NET Core的身份认证框架IdentityServer4(1)-特性一览

    IdentityServer4是ASP.NET Core的一个包含OpenID和OAuth 2.0协议的框架.OpenID和OAuth 的区别请看 https://www.zhihu.com/ques ...

  6. header操作cookie

    root@kl20080094:~# curl -I "http://www.xxx.com" HTTP/1.1 200 OK Server: nginx/0.8.53 Date: ...

  7. Problem F: 多少个最大值?

    Description 输入若干个int类型的整数,求它们的最大值及其个数. Input 输入 若干个int类型的整数,至文件尾为止. Output 输出只有一行:There are # maximu ...

  8. 搭建本地Tomcat

    1.下载自己需要的版本我安装的Tomcat8(https://tomcat.apache.org/). 2.根据自己的电脑下载需要的系统版本.我的电脑是Windows64位的操作系统 3.选择一个目录 ...

  9. C#递归查询

    一.sql --构造测试数据: 只作演示用 CREATE TABLE [dbo].[Tim_LinqTable]( [Id] int PRIMARY KEY IDENTITY(1,1) NOT NUL ...

  10. oracle数据库冷备中的手工备份和恢复

    我的操作系统是red hat5.5 32位系统oracle11g 以我的系统为例: 冷备状态下,数据库必须是关闭的,但是我们现在要做一个实验,在开库的状态下分别查询出: 1.show paramete ...