通俗易懂了解并实现 vuex 原理

Vuex是什么？

官方解释：vuex是一个专门为vue.js应用程序开发的状态管理模式。他采用 集中式存储管理应用的所有组件的状态，这个状态管理包括了以下几个部分：

• state:驱动应用数据源
• view，以声明方式将 state 映射到视图中
• actions 响应vue上的用户输入导致的状态变化

官方的 ‘单项数据流’理念的简单示意：

每一个vuex应用的核心就是 store(仓库)，store基本上就是一个容器，包含着你应用的大部分的状态(state)

看图了解一下工作的原理

注意点：

• 改变状态的唯一途径 提交mutations
• 如果是异步的就派发(dispath)actions,本质还是提交mutations
• 触发actions可以用组件 components使用 dispath 来触发
• 提交mutations之后可以动态渲染组件 vue components

原理的实现

	// 声明一个 veu 当使用Vue.use的时候给Vue赋值
	let Vue;
	// 封装这个函数是重写配置传来的值 所以我们封装一下
const forEach = (obj, callback) => {
    Object.keys(obj).forEach((key) => {
        callback(key, obj[key])
    })
}
	//定义一个类
	class Store{
		// 通过构造函数传来的值进行配置
		constructor(options){
			// state使用 vue 来创建一个双向绑定
			this._s = new Vue({
				data:{
					state:options.state	
				}
			})
		// 得到配置上的getters 如果没有就默认为空
		let getters = options.getters || {}
		this.getters = {}
		//把getters里面的配置项 绑定到 this.getters
		forEach(getters,(key,value)=>{
			  /* 
            这里的key和值就是
              gettrers: {
                add: function (state, payload) {
                }
            },
            key 就是add 函数就是value
            */
             Object.defineProperty(this.getters, key, {
                get() {
                    return value(this.state)
                }
            })
		})
	 // 得到配置上的mutations 如果没有就默认为空 类似以上面的方法
	 let mutations = options.mutations || {}
        this.mutations = {}
        forEach(mutations, (key, value) => {
            this.mutations[key] = (payload) => {
                console.log(value)
                value(this.state, payload)
            }
        })
        //  得到配置上的actions 如果没有就默认为空
        let actions = options.actions || {}
        this.actions = {}
        forEach(actions, (key, value) => {

            this.actions[key] = (payload) => {
                console.log(value)
                value(this, payload) //action是传入store
            }
        })
		}
    // dispatch和commit的实现
    dispath(type, payload) {
        this.actions[type](payload)

    }
    commit(type, payload) {
        this.mutations[type](payload)
    }
    get state() {
        return this._s.state
    }
	}

	// 使用 Vue.use就会触发这个函数
	function install(v){
	 // 获取Vue框架
		Vue = v
	// 通过全局的混入模式来给所有的组件添加$store
	Vue.mixin({
		beforeCreate(){
			//判断当前是否为跟组件 如果是跟组件就把跟组件的store赋值
			if(this.$options && this.$options.store){
				this.$store = this.$options.store
			}else {
			 	//找他的父级
			 	this.$store = this.$parent && this.$parent.$store
			 }
		}
	})
	}

		// 最后导出去
		export defalut {
			install,
			Store	
		}

使用直接把导入的Vuex改成自己写的js文件即可