Vue学习第四天：17Vuex核心概念及底层原理

min-vuex.js文件

import Vue from 'vue'

//默认参数
function Store(option = {}) {
    //解构赋值
    var {
        state = {}, mutations = {}
    } = option;
    //通过Vue将state设置为响应式数据
    this._vm = new Vue({
        data() {
            return {
                $$state: state
            }
        }
    });

    this._mutations = mutations;
}

//getter
Object.defineProperty(Store.prototype, "state", {
    get() {
        return this._vm._data.$$state;
    }
})

//Store原型下添加commit方法，通过commit调用mutations中的方法
Store.prototype.commit = function(methodName, payload) {
    if (this._mutations[methodName]) {
        this._mutations[methodName](this.state, payload);
    }
}

//增强的对象文本
export default {
    Store
}

总结：

1. State：提供一个响应式数据。
2. Getter：借助Vue的computed来实现缓存。
3. Mutation：更改state的方法。
4. Action：触发Mutation的方法。
5. Module：Vue.set动态添加state到响应式数据中。