Vuex的核心原理

1.分析Vuex的使用

import Vue from "Vue";
import Vuex from "Vuex";
Vue.use(Vuex);
let stroe = new Vuex.Store({
	state:{
		count:'我是一个',
		name:'赵四'
	},
	getter:{
		xinm(store){
			return store.name +'王五'
			
		}
	},
	mutations:{
		add(stroe,options){
			stroe.count = options;
		},
		
	},
	actions:{
		pm(store,options){
			store.commit('add',options);
		}
	}
	
})
export default stroe;

在main.js中

import Vue from "vue";
import stroe from "./store/index.js";
new Vue({
	store:store,
	render:(h)=>h(App)
});

得出这么个结论

1.Vuex中一定会有install方法----->因为Vue.use(Vuex)就会执行Vuex.install这个方法
2.Vuex中会有一个类Store的这个类
	因为他有new Vuex.Store()

myVuex.js中

let Vue;
function install(_Vue){
	Vue = _Vue;//保存Vue;
	Vue.mixin({
		beforeCreate(){
			if (this.$options.store){
				//如何有this.$options.store这个属性，那么就是根组件
				this.$store = this.$options.store
			}else if (this.$parent){
				//如何有this.$parent这个属性，那么就是他是哪一个的子组件，所以
				this.$store = this.$parent.$store;
			}
		}//在这个全局混入的生命周期函数中，的执行顺序是根组件->父组件->子组件的这样的顺序的
		
	});
	//这里为什么要用Vue的全局混入那,因为在new Vue({store})之后，所有的其他Vue实例中都会有这个store属性，所以这里用到了全局的混入;
}

1.所以上面解决的是，在根组件中添加store之后，所有的子组件，都拥有了$store这个属性了
2.原因Vue.use(Vuex);//会执行Vuex的install，我们在install方法中完成上的需求
3.我们利用Vue的全局混入的方式来为其他的组件添加这个属性

myVux.js中的Store类的实现

class Store{
	constructor(obj){
		//1.obj是一个对象，是new Vuex.Store({})传入的那个对象
		//2.obj的结构为
		//     state:{
//         name:'黍离麦秀',
//         blue:'蓝色'


//     },
//     mutations:{
//         add(store,options){
//             store.state.name = options
//             // alert('修改了2')
//             // console.log(store,'store.state',options);
//             // alert(store.state)
            
//         }

//     },
//     getters:{
//         ppp(state){
//             return state.name + '项目项目吗'
//         }

//     },
//     actions:{
//         mox(contenx,options){
//             console.log(contenx,'contenx')
//             contenx.commit('add',options)

//         }
		2.点state中的数据是响应式的，所以这里我们借助Vue中的响应式来解决这个问题
		let vm = new Vue({
			data:obj.state
		})
		this.state = vm.$data//这样就解决了stat中的数据为响应式的问题了;
		3.实现mutations
		let mutations = obj.mutations;
		this.mutations = {}
		Object.keys(mutations).forEach(key=>{
			this.mutations[key] = (options)=>{
				mutations[key].call(this,this.state,options)
			}
			1.这里的循环遍历的操作的目的就是，根据参数在this.mutations中添加响应的方法，实现的
			2.实现的原理就是，为this.mutations添加对应的属性，属性值为函数，执行这个函数，就是执行mutations中的方法，
			3.但是我们要保证mutations中的每一个方法中的this，都是这类的实例
			4.mutations中的第一个参数也要是这个类的实例,
			5.第三个参数就是传递的值;
			6.所以我们里面的函数调用就是mutations[key].call(this,this,options);
		});
		//现在我们需要实现actions
		this.actions = {};
		let actions = obj.actions;
		Object.keys(actions).forEach(key=>{
			this.actions[key] = (options)=>{
				actions[key].call(this,this,options);
			}
		});
		//这里的原理和mutations是差不多的
		//实现getter
		let getter = obj.getters;
		this.getter = {};
		let then = this;
		Object.keys(getter).forEach(key=>{
			Object.defineProperty(this.getter,key,{
				get(){
					return getter[key](then);
				}
			})
		})
		
	};
	//现在我们需要实现commit方法
	commit(type,options){
		this.mutations[type](options);
	}
	//实现dispatch
	dispatch(type,options){
		this.actions[type](options);
	}
	
}
export default {
	install,
	Store
}

下面我们就要实现Vuex中的辅助函数

export function mapState(arr=[]){
	let obj = {}
	arr.forEach(key=>{
		obj[key] = function (){
			return this.$store.state[key]
		}
	})
	return obj;
}
1.我们在使用mapState时，是这样使用的
computed:{
	...mapState(['name'])
}
2.所以他一定要能使用展开运算符 ...
3.computed是Vue中的计算属性，一般是每一个属性的属性值，是一个方法
所以obj[key] = function (){}

export function mapMutations(arr = []){
	let obj = {}
	arr.forEach(key=>{
		obj[key] = function (options){
			this.$store.commit(key,options);
		}
	})
	return obj
}
export function mapActions(arr = []){
	let obj = {};
	arr.forEach(key=>{
		obj[key] = function (options){
			this.$store.dispatch(key,options)
		}
	})
	return obj;
}