Vue技术栈作为当今前端的核心技能之一,应该熟练掌握,不仅应该知其然,更应该知其所以然。以下部分为个人读vuex源码心得,主要分为三个部分,一个部分是从整体看其原理,一个是局部每个函数的实现过程分析,还有一部分是补充文档中未提及的部分
[toc]
整个存储体系是由module节点组成的一棵树,而 ModuleCollection则是这棵树的管理者 ,这是一个典型的组合模式。
当通过moduleCollection进行register,update,unRegister时,ModuleCollection是不进行具体的操作的,他只是把这些任务派发给具体的module,通过module自身的 addChild , update , removeChild进行实际的操作。此外,ModuleCollection还提供了对这棵树路径操作的办法,比如将从根节点到指定的子节点的路径以字符串的方式表达的getNamespace(path);比如根据指定路径获取module节点的 get( path ) 方法。
而每个module提供两部分功能,一类是操作自身,一类是管理子节点。操作自身的方法主要对应着module自身的_rawModule进行操作;管理子节点,主要对应着module的_children进行操作。
- 操作自身的有 : update , forEachGetter , forEachMutation , forEachAction。
- 管理子节点的有 : addChild , removeChild , getChild , forEachChild
当调用 new Vuex.Store( options ), 主要过程是:
-
通过 `this._modules = new ModuleCollection(options)` 构造这棵树。 -
通过 `installModule(this, state, [], this._modules.root)` 将这颗树的相关信息进行处理并存储到我们store实例的各个属性中,当对store实例的各种操作,实质上都是在用这棵树提供的信息功能进行相应的处理。
- applyMixin : 源码6~40行
- forEachValue : 源码87~91行
- isObject : 源码93~95行
- isPromise( val ) : 源码97~99行
- assert : 源码101~105行
- Module类 : 源码107~168
- ModuleCollection类 : 源码170~225行
- update : 源码227~254行
- assertRawModule : 源码256~292行
- makeAssertionMessage : 源码294~301行
- store构造函数 : 源码305~376行
- prototypeAccessors : 源码378~388行
- Store.prototype.commit : 源码390~425行
- Store.prototype.dispatch : 源码427~453行
- Store.prototype.subscribe : 源码455~457行
- Store.prototype.subscribeAction : 源码459~461行
- Store.prototype.watch 源码 : 463~472行
- Store.prototype.replaceState : 源码474~480行
- Store.prototype.registerModule : 源码482~498行
- Store.prototype.unregisterModule : 源码500~517行
- Store.prototype.hotUpdate : 源码519~522
- Store.prototype._withCommit : 源码524~531行
- genericSubscribe : 源码533~543行
- resetStore : 源码545~555行
- resetStoreVM : 源码557~607行
- installModule : 源码609~648行
- makeLocalContext : 源码650~713行
- makeLocalGetters : 源码715~740行
- registerMutation : 源码742~747行
- registerAction : 源码749~772行
- registerGetter : 源码774~789
- enableStrictMode : 源码791~799行
- getNestedState : 源码801~807行
- unifyObjectStyle : 源码809~821行
- install: 源码823~834行
- mapState : 源码836~861行
- mapMutations : 源码863~887行
- mapGetters : 源码889~910行
- mapActions : 源码912~936行
- createNamespacedHelpers : 源码938~945行
- normalizeMap : 源码947~955行
- normalizeNamespace : 源码957~965行
- getModuleByNamespace : 源码969~975行
当其第二个参数(第一个参数是namespace,可以没有)为对象时,该对象的键对应的值是函数时,除了获取namespace指定的state,还会获取对应的getters 源码中有:
return typeof val === 'function' ? val.call(this, state, getters) : state[val]
因此调用时可以:
mapState({ field : function( state , getters ){} })
当其第二个参数(第一个参数是namespace,可以没有)为对象时,该对象的键对应的值可以是函数,该函数第一个参数会是namespace指向的commit 源码中:
return typeof val === 'function' ? val.apply(this, [commit].concat(args)) : commit.apply(this.$store, [val].concat(args))
因此调用时可以:
mapMutations({ field : function( commit , payload ){ //其他代码... commit('type',payload); //... } })
当其第二个参数(第一个参数是namespace,可以没有)为对象时,该对象的键对应的值可以是函数,该函数第一个参数会是namespace指向的dispatch 源码中:
return typeof val === 'function' ? val.apply(this, [dispatch].concat(args)) : dispatch.apply(this.$store, [val].concat(args))
因此调用时可以:
...mapActions({ asyncAdd( dispatch , payload){ dispatch('type',payload) .then(function( data ){ console.log( '数据已经递交:' , data ) }) } })
国安信徒
2018年04月05日