vuex源码阅读系列
文章平均质量分 69
纷飞丿
我的前端开源库:
fly-barrage:功能完善,强大的 web 端弹幕库。包含完整 DEMO,可快速上手;
fly-gesture-unlock:功能完善,强大的 web 端手势解锁库。包含完整 DEMO,可快速上手;
展开
-
Vuex源码阅读(5):Vuex 中的发布脚本
如果我们自己写一个库,当想要发布时,要进行一系列的操作,例如:更改 package.json 中的 version、执行测试命令、执行构建命令、新增 CHANGELOG.md 文件中的内容、将库推送到 GitHub 以及将库上传到 npm 仓库。这一系列的操作很繁琐,人为的进行的话,很容易出错,所以Vuex 使用 js 脚本进行库的发布,接下来我们看看 Vuex 中的发布脚本。1,package.json首先看 package.json 文件中与发布有关的脚本:{ "scripts": .原创 2021-10-11 10:03:10 · 151 阅读 · 0 评论 -
Vuex源码阅读(4):Vuex 中的代码构建
阅读某个库的源码,除了阅读功能性的代码之外,还应该多多注意工程化部分的代码,例如:Vuex 中的构建脚本和发布脚本,都很有意思,很值得我们借鉴和学习。今天,让我们一起看看 Vuex 的源码是如何构建的。Vuex 的代码构建使用了 Rollup ,如果对其不怎么了解的话,可以先看看它的官方文档。1,package.json首先我们应该看 Vuex 项目的 package.json 文件,里面与构建有关的部分如下所示:{ "scripts": { "build": "npm run原创 2021-10-08 09:31:24 · 222 阅读 · 0 评论 -
Vuex源码阅读(3):流程分析
这篇文章从入口文件开始解读 Vuex 源码,主要看我写在代码中的注释,我写的很详细。由于源码内容比较多,一些不太重要的部分就不过多陈述了,想看更加具体的解析可以下载带注释的源码自行查看。1,/src/index.jsimport { Store, install } from './store'import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from './helpers原创 2021-10-07 11:21:03 · 555 阅读 · 0 评论 -
Vuex源码阅读(2):实现原理
如果直接从源码的入口文件开始解读,并不能很好的理解消化,因为不知道 Vuex 的核心实现原理,会使读者很茫然,并不知道某段代码是做什么的。所以在这里,我首先对 Vuex 的实现原理进行解读。Vuex 实现的核心其实是利用了 Vue 实例的响应式特性。我们在代码中通过 new Vuex.Store({}) 生成 Store 实例。 这个 Store 实例会被从上而下(父级到子级)的赋值到每个 Vue 实例对象的 $store 属性上,每个 Vue 实例都可以通过 this.$store 拿到这个对象,具体原创 2021-10-06 10:35:12 · 368 阅读 · 0 评论 -
Vuex源码阅读(1):目录结构
Vue 源码的博客已经写了三四个月了,总共写了三十多篇文章,感兴趣的同学可以点击这里进行查看。今天,我开始一个新的系列 —— Vuex 库的源码阅读,相信使用了 Vue 的同学对 Vuex 这个库也是非常的熟悉,Vuex 是 Vue 框架专有的一个集中式的状态管理仓库,在我们平时的开发中经常被使用到,相比于 Vue 的源码,Vuex 的源码要简单很多,只需几篇文章就可以讲清楚,让我们先从 Vuex 库的目录结构开始看,具体内容如下所示:├─dist原创 2021-09-30 10:25:53 · 197 阅读 · 0 评论