Vuex原理理解及实现

Vuex是什么？

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解：Vuex就是用来进行组件之间进行数据交换的第三方 “仓库”，组件可以把想要共享的数据存放在这里面，别的组件想要的之后直接调取即可。

Vuex原理

个人理解它就是通过 全局混入 一个对象，在该对象的 beforeCreate 声明周期函数中，对每一个组件添加了一个属性 $store，值就是使用Vuex时所创建的Vuex实例。

Vuex实现


let Vue = null; // 用一个全局变量接收 Vue.use() 传过来的vue函数
function install(_Vue){Vue = _Vue;// 混入一个对象Vue.mixin({beforeCreate() {// 这里的this是当前组件（要实现的功能是给每一个组件都添加 $store 属性，值就是 创建的 Store 实例）// console.log(this);if(this.$options.store) {// console.log('我是根')this.$store = this.$options.store;} else if(this.$parent) {// console.log('我不是祖根尖')this.$store = this.$parent.$store;}}});
}class Store{constructor(options) {// options配置有 state、mutations、getters等// 其中 state 是响应式的，借助vue实例的data是响应式的let vm = new Vue({data: {state: options.state}});this.state = vm.state;// mutations 存放的是方法，且方法中的this是当前Store实例this.mutations = {};let mutations = options.mutations || {};Object.keys(mutations).forEach(mutation => {// 这个箭头函数中的this是Store实例this.mutations[mutation] = (param) => {// 这里的this仍然是当前 Sotre 的实例// 为什么不直接 this.mutations[mutation](param) 呢？// 因为是死递归，会造成内存泄漏mutations[mutation].call(this, this.state,param); // 通过 call 强制改变方法中的this指向};});// actions 中存放的也是方法，与mutations不同的是，它里面的函数接收的第一个参数是当前 Store 实例this.actions = {};let actions = options.actions || {};Object.keys(actions).forEach(action => {// this.actions[action] = actions[action].bind(this,this);  // 这里是通过 bind来改变函数中this的指向，但是不建议，因为这样写的话，那么在执行某一个action方法时就可以传递多个参数，可是action默认是最多接收两个参数的this.actions[action] = (param) => {// 这里的this仍然是当前 Sotre 的实例// 为什么不直接 this.mutations[mutation](param) 呢？// 因为是死递归，会造成内存泄漏actions[action].call(this, this,param); // 通过 call 强制改变方法中的this指向};});// getters 存储的也是函数，但是每个函数都要return 一个值，而且这个值还是响应式的，这就需要用到数据劫持this.getters = {};let getters = options.getters || {};Object.keys(getters).forEach(getter => {Object.defineProperty(this.getters, getter, {get: () => {// console.log(this, this.getters);// 调用 getters 是不需要传参的，但是默认第一个参数是 this.statereturn getters[getter].call(this, this.state);}});});}// 触发 mutations 中的方法是通过 commitcommit(type, param) {console.log(this.mutations);this.mutations[type](param)}// 触发 actions 中的方法是通过 dispatchdispatch(type, param){this.actions[type](param);}
}// 辅助函数: 不管是 mapState 还是其他辅助函数，最后都是在响应的{}中通过展开运算符获取其值，所以这些函数执行完之后应该是返回一个对象// 所有辅助函数只考虑传的值是数组的情况
export function mapState(ary){let obj = {}; // obj每一个属性的值都是一个函数，并且函数中返回的是 store.state的值ary.forEach(item => {// 要让obj的属性对应上ary的每一项，但是属性值是 Store实例上的stateobj[item] = function(){console.log(this) // =>当前使用这个属性的组件return this.$store.state[item]}});console.log(obj);return obj;
};export function mapGetters(ary){let obj = {}; // obj每一个属性的值都是一个函数，并且函数中返回的是 store.state的值ary.forEach(item => {// 要让obj的属性对应上ary的每一项，但是属性值是 Store实例上的stateobj[item] = function(){return this.$store.getters[item]}});return obj;
};export function mapMutations(ary) {let obj = {};ary.forEach(item => {obj[item] = function(param){this.$store.commit(item,param)}});return obj;
};export function mapActions(ary) {let obj = {};ary.forEach(item => {obj[item] = function(param) {this.$store.dispatch(item, param);}})
}export default {Store,install
}

！注意：这里只是简单实现Vuex的一些基本功能，方便我自己理解Vuex的功能和使用。

Vuex原理理解及实现相关推荐

深入vuex原理(上)
前言 vuex作为vue生态的重要组成部分,是对store进行管理的一柄利剑.简而言之,vuex是vue的状态管理器.使用vuex可用使数据流变得清晰.可追踪.可预测,更可以简单的实现类似时光穿梭 ...
遇见面试--vuex原理
遇见面试 Vuex原理解析一.前言自从学习了VUE框架,其中必不可少的会用到vuex这个核心插件,而且在做项目的时候,基本都会使用,可能你会使用vuex状态管理,但是对vuex原理存在着或多或少的 ...
vuex 源码分析_深入Vuex原理（上）
原标题:深入Vuex原理(上) 孔维国,2016年加入去哪儿网技术团队.目前在大住宿事业部/增值业务研发中心,参与开发了TMC.CRM.QTA.Auth等项目,负责node框架nomi的设计以及开发. ...
Vuex原理解析实现
Vuex是基于Vue的响应式原理基础,所以无法拿出来单独使用,必须在Vue的基础之上使用. 1.Vuex使用相关解析 main.js import store form './store' // 引入 ...
Linux 输入子系统原理理解（原创）
linux 输入子系统原理理解(原创) 以前学了单独的按键设备驱动以及鼠标驱动,实际上,在linux中实现这些设备驱动,有一种更为推荐的方法,就是input输入子系统.平常我们的按键,触摸屏,鼠 ...
集成学习——NGBoost论文研读与原理理解
NGBoost(Natural Gradient Boosting)是一个比较新的Boosting方法,它是2019年10月斯坦福吴恩达团队在arXiv上发表的,论文连接为:NGBoost: Natu ...
集成学习—GBDT原理理解
GBDT,全称为梯度提升决策树,即Gradient Boosting Decision Tree.上一篇博客:集成学习-GBDT(论文研读)中已经对GBDT原始论文--Jerome H. Friedm ...
2021-08-06随记(vertical-align, 顶线、底线、中线、基线，vue原理理解)
vertical-align 父元素是inline或者是table-cel,如果是inline-block或者block则必须要设置line-height(和高度一样)子元素为inline或者inli ...
win10自动修复无法修复你的电脑的解决方法(操作+原理理解)
目录前言步骤与原理疑惑总结参考文献前言早起开机,突遇下面问题,以为重启即可,后来无济于事,于是查找资料,找到了解决方法,给出了具体操作,更重要的是其中一些操作语句的原理理解,因为每个人出 ...

Vuex原理理解及实现

Vuex是什么？

Vuex原理

Vuex实现

Vuex原理理解及实现相关推荐

最新文章

热门文章