实现原理_Vuex的实现原理

你知道vuex如何工作的吗？先来看下图了解下

了解图之后看来下代码的实现原理吧

let Vue;class Store { constructor(options){ this.getters = {}; this.mutations = {}; this.actions = {}; this._vm = new Vue({ data: { state: options.state } }) const { getters,mutations,actions } = options; if(getters){ Object.keys(getters).forEach((key)=>{ Object.defineProperty(this.getters, key, { get: ()=>getters[key](this.state) }) }) } if(mutations){ Object.keys(mutations).forEach(key=>{ this.mutations[key] = () => { mutations[key].call(this, this.state); }; }) } if (actions) { Object.keys(actions).forEach(key=>{ this.actions[key] = () => { actions[key].call(this, this); }; }) } } get state(){ return this._vm.state } commit = (type) => { this.mutations[type](this) }  dispatch = (type) => { this.actions[type](this) }}const install = function(_Vue){ Vue = _Vue Vue.mixin({ beforeCreate(){ if(this.$options && this.$options.store){ this.$store = this.$options.store }else{ this.$store = this.$parent && this.$parent.$store } } })}export default {install, Store}

以上代码的核心其实在为什么在里面增加了new Vue(),单纯的修改数据不能做到数据响应式，试图还是无法更新的，所以利用了Vue的特性来实现试图更新