let Vue
// 1.創(chuàng)建Store類
class Store {
    constructor(options) {
        // 8.存儲(chǔ)mutations屬性
        this._mutations = options.mutations || {};
        // 11.存儲(chǔ)action屬性
        this._actions = options.actions || {}
        // 18.存儲(chǔ)getters屬性
        this._getters = options.getters || {}


        let computed = {};
        // 17.使用方法是$store.getters.***，所以定義一個(gè)getters屬性
        this.getters = {}
        const store = this;
        // 18.循環(huán)getters屬性的key
        Object.keys(this._getters).forEach(key => {
            // 19.獲取用戶定義的getters
            const fn = store._getters[key];
            // 20.轉(zhuǎn)換為computed可以使用的無(wú)參數(shù)形式,創(chuàng)建同名函數(shù)
            computed[key] = function () {
                return fn(store.state)
            };
            // 21.因?yàn)樵赾omputed創(chuàng)建了指定的計(jì)算函數(shù)，相當(dāng)于再this._vm下就可訪問(wèn)到計(jì)算屬性
            // 同理，外界使用$store.getters.***獲取時(shí)，先從this.getters匹配指定屬性，讀取屬性時(shí)執(zhí)行g(shù)et函數(shù)，最終從this._vm上找去計(jì)算屬性，實(shí)則是this._vm.***
            Object.defineProperty(store.getters, key, {
                get: () => store._vm[key]
            })
        })


        // 4.響應(yīng)式state屬性
        this._vm = new Vue({
            data: {
                $$state: options.state
                // 區(qū)別是 如果不使用$$，在_vm根上會(huì)有state屬性；如果使用$$在_vm根上會(huì)有_data屬性掛載這響應(yīng)式$$state
            },
            // 16.創(chuàng)建計(jì)算屬性getters方法
            computed
        });

        // 15.避免印在setTimeout等 this指向問(wèn)題，重新設(shè)置this
        this.commit = this.commit.bind(this)
        this.dispatch = this.dispatch.bind(this)
    }
    // 5.獲取state屬性值
    get state() {
        return this._vm._data.$$state
    }
    // 6.如果想修改state報(bào)錯(cuò)提示
    set state(v) {
        console.error('please No!');
    }
    // 7.定義commit  使用方式commit(type,payload)
    commit(type, payload) {
        // 9.根據(jù)type從this._mutations獲取需要執(zhí)行的方法
        let entry = this._mutations[type];
        if (!entry) {
            console.error('entry no!');
        }
        // 10.傳遞state
        entry(this.state, payload)
    }
    // 12.dispatch傳遞的是store類，所以直接傳遞this
    dispatch(type, payload) {
        // 13.根據(jù)type從this._mutations獲取需要執(zhí)行的方法
        let entry = this._actions[type];
        if (!entry) {
            console.error('entry no!');
        }
        // 14.傳遞this
        entry(this, payload)
    }

}
// 2.創(chuàng)建install插件，形參_Vue就是Vue的構(gòu)造函數(shù)
function install(_Vue) {
    Vue = _Vue
    // 3.掛載$store到Vue,使用混入延遲到構(gòu)造完成后執(zhí)行
    Vue.mixin({
        beforeCreate() {
            if (this.$options.store) {
                Vue.prototype.$store = this.$options.store
            }
        }
    })
}
export default {
    Store,
    install
}