Vuex源码阅读笔记
来源:互联网 发布:数据库工程师培训机构 编辑:程序博客网 时间:2024/06/07 21:32
俗话说得好,没有无缘无故的爱,也没有无缘无故的恨,更不会无缘无故的去阅读别人的源代码。之所以会去阅读Vuex的源代码,是因为在刚开始接触Vuex时,就在官方文档的Actions部分,看到这么一句:
// the simplest actionfunction increment (store) { store.dispatch('INCREMENT')}// a action with additional arguments// with ES2015 argument destructuringfunction incrementBy ({ dispatch }, amount) { dispatch('INCREMENT', amount)}
上面的Action还好说,能看懂,但是下面使用ES6写法的Action是什么鬼呀喂(摔!)
虽然知道有解构赋值,但是那个 { dispatch }
又是从哪儿冒出来的呀喂!明明我在调用时,没有传这个参数呀!
之前因为赶项目进度,所以抱着能用就行的态度,也就没管那么多。如今有了空闲时间,必须好好钻研一下呀。
而钻研最好的方式,就是阅读Vuex的源代码。这样就能弄清楚,那个 { dispatch }
到底从哪儿冒出来的。
Vuex源代码简介
Vuex的源代码量挺少的,加起来也才600行不到,但是其中大量使用了ES6的语法,且部分功能(如Vuex初始化)使用到了Vue。所以读起来还是有些费劲的。
整个Vuex的源代码,核心内容包括两部分。一部分是Store的构造函数,另一部分则是Vuex的初始化函数。
而刚才问题的答案,就在第二部分。
问题场景还原
首先要介绍的,就是Vuex在Vue项目中的初始化。这儿贴一段代码:
首先是Vuex中,我写的Actions源代码:
// global/Vuex/action.jsexport const getMe = ({ dispatch }) => { /** * 异步操作,获取用户信息,并存入Vuex的state中 */ res.user.get_me() .then(data => { dispatch('GET_ME', data) }) .catch(err => { console.log(err) })}
这个则是顶层组件,调用store的地方。由于Vuex的特点,store只需要在最顶层的组件声明一次。
<template> <div id="wrapper"> <router-view></router-view> </div></template><script type="text/javascript"> import store from './Vuex/store.js' export default { store }</script>
接下来则是组件中,则是实际调用Vuex的代码。
// index.vueimport { getMe } from './../global/Vuex/action'export default { vuex: { actions: { getMe }, getters: { // 从state中获取信息 user: state => state.user } }, ready() { // 开始获取用户信息 this.getMe() }}
在这儿,可以很明显的看出,我在使用 this.getMe()
时,是没有任何参数的。但是在 getMe
函数的定义中,是需要解构赋值出 {dispatch}
的。
就好比说这个:
function getX({ x }) { console.log(x)}getX({ x: 3, y: 5 })// 3
你得传入相应的参数,才能进行解构赋值。
同时,我注意到在Vuex的Actions调用,需要在Vue的options的Vuex.actions中先声明,之后才能使用。
那么,一定是Vuex对这个Action动了手脚。(逃)
而动手脚的代码,就存在于Vuex源代码的 override.js
中。这个文件,是用于初始化Vuex的。
Vuex的初始化
在 override.js
中,有个 vuexInit
的函数。看名字就知道,这是拿来初始化Vuex的。
在代码开头,有这么一句:
const options = this.$optionsconst { store, vuex } = options// 感觉解构赋值真的很棒,这样写能省很多时间。// 下面的是老写法// const store = options.store// const vuex = options.vuex
在这儿,用于是在Vue中调用,所以this指向Vue,而this.$options则是Vue的配置项。
也就是写Vue组件时的:
export default {……一些配置}
这里,就把Vue配置项的store和vuex抽离出来了。
搜寻store
接下来,则看到了Vuex源代码的精妙之处:
// store injectionif (store) { this.$store = store} else if (options.parent && options.parent.$store) { this.$store = options.parent.$store}
解构赋值并不是一定成功的,如果store在options中不存在,那么store就会是undefined。但是我们需要找store。
于是Vuex提供了向父级(Vue中的功能)寻找store的功能。不难看出,这儿父级的$store如果不存在,那么其实他也会到自己的父级去寻找。直到找到为止。
就想一条锁链一样,一层一层的连到最顶部store。所以在没有找到时,Vuex会给你报个错误。
// 声明了Vuex但没有找到store时的状况if (vuex) { if (!this.$store) { console.warn( '[vuex] store not injected. make sure to ' + 'provide the store option in your root component.' ) }
对Vuex声明的内容,进行改造
接下来,则是对Vuex声明的内容,进行改造。
首先的是获取Vuex对象的内容:
let { state, getters, actions } = vuex
同时,在这儿还看到了对过时API的处理。感觉算是意料之外的惊喜。
// handle deprecated state option// 如果使用state而不是getters来获取Store的数据,则会提示你state已经过时的,你需要使用新的api。// 但是,这儿也做了兼容,确保升级时服务不会挂掉。if (state && !getters) { console.warn( '[vuex] vuex.state option will been deprecated in 1.0. ' + 'Use vuex.getters instead.' ) getters = state}
接下来,则是对getters和actions的处理:
// gettersif (getters) { options.computed = options.computed || {} for (let key in getters) { defineVuexGetter(this, key, getters[key]) }}// actionsif (actions) { options.methods = options.methods || {} for (let key in actions) { options.methods[key] = makeBoundAction(this.$store, actions[key], key) }}
可以看出,在这儿对getters和actions都进行了额外处理。在这儿,我们讲述actions的额外处理,至于getters,涉及了过多的Vue,而我不是很熟悉。等我多钻研后,再写吧。
Actions的改造
对整个Actions的改造,首先是Vuex的检测:
// actionsif (actions) { // options.methods是Vue的methods选项 options.methods = options.methods || {} for (let key in actions) { options.methods[key] = makeBoundAction(this.$store, actions[key], key) }}
在这儿,我们一点一点的剖析。可以看出,所有的actions,都会被makeBoundAction
函数处理,并加入Vue的methods选项中。
那么看来, makeBoundAction
函数就是我要找的答案了。
接下来贴出 makeBoundAction
函数的源代码:
/** * Make a bound-to-store version of a raw action function. * * @param {Store} store * @param {Function} action * @param {String} key */function makeBoundAction(store, action, key) { if (typeof action !== 'function') { console.warn(`[vuex] Action bound to key 'vuex.actions.${key}' is not a function.`) } return function vuexBoundAction(...args) { return action.call(this, store, ...args) }}
事情到这儿,其实已经豁然明朗了。
我在Vuex中传入的actions,实际会被处理为 vuexBoundAction
,并加入options.methods中。
在调用这个函数时,实际上的action会使用call,来改变this指向并传入store作为第一个参数。而store是有dispatch这个函数的。
那么,在我传入 {dispatch}
时,自然而然就会解构赋值。
这样的话,也形成了闭包,确保action能访问到store。
结语
今天应该算是解决了心中的一个大疑惑,还是那句话:
没有无缘无故的爱,也没有无缘无故的恨,更没有无缘无故冒出来的代码。
整个源代码读下来一遍,虽然有些部分不太理解,但是对ES6和一些代码的使用的理解又加深了一步。比如这回就巩固了我关于ES6解构赋值的知识。而且还收获了很多别的东西。总而言之,收获颇丰~最后的,依然是那句话:前端路漫漫,且行且歌。
- Vuex源码阅读笔记
- Vuex 笔记
- vuex笔记
- VueX笔记
- LZ77源码阅读笔记
- Boa 源码阅读笔记
- VNC源码阅读笔记
- osqa源码阅读笔记
- VNC源码阅读笔记
- MPlayer 源码阅读笔记
- PyEmu源码阅读笔记
- JSONModel源码阅读笔记
- JSONModel源码阅读笔记
- HSF源码阅读笔记
- memcached 源码阅读笔记
- ALLJOYN源码阅读笔记
- netmap源码阅读笔记
- ArrayList源码阅读笔记
- 翻译:走出类加载器迷宫
- android同时使用wifi和以太网
- Excel个人所得税简洁计算公式
- pl/sql 导出insert语句和pl/sql导出表结构
- sys_execv源码分析
- Vuex源码阅读笔记
- WWDC心得与延伸:iOS图形性能
- Android sqlite插入一条数据时,时间自动写入数据库
- 初识PHP(10)
- 用Qtl编写媒体软件到安卓(待续)
- 数据结构——图 动态规划
- C语言之尾队列tailq
- 第十二课 数据文件与持久性
- 大神教你如何在 Linux 中启用 Shell 脚本的调试模式