关于Vuex的简单实现

前言

近期为了出去面试看看，总结了下自己学的东西会，突然发现自己有一部分东西只停留在会用的阶段，没有怎么了解过他的实现，所以就有了这篇文章，如有问题还请及时告知，万分感谢~(大佬轻喷~)

核心概念

vuex采用集中式的方式存储需要共享的状态，是专门为vue设计的状态管理库 state：驱动应用的数据源 view：以声明的方式将state映射到视图 actions，响应在view上的用户输入导致的状态变化

store中主要有一下几个api
state: 主要用来存储数据
getter: 类似于组件中的计算属性，如果想要对state中的数据做简单的处理，就可以运用此方法
mutation: 主要对数据进行同步操作的处理
action: 主要对数据进行异步操作的处理，但是还是会流向mutation，以避免在vuetools中报错
module:可以生成多个store类

接下来我们就来简单实现下store类

模拟 Store 类

let _Vue = null

class Store{
    cinstructor (options) {
        const {
            state = {},
            getters = {}
            mutations = {}
            actions = {}
        } = optinos
        this.state = _Vue.observable(state)
        this.getters = Object.create(null)
        Object.keys(getters).forEach(key => {
            Object.defineProperty(this.getters, key, {
                get: ()=> getters[key](state)
            })
        })
        this._mutations = mutations
        this._actions = actions

        commit ( type,payload ) {
            this._mutations[type](this.state, payload)
        }
        dispatch (type, payload) {
            this._actions[type]( this , payload)
        }
    }
}

1.如果要使用的话我们就把创建Vue实例的时候传入的store对象注入到Vue原型上的$store

2.在所有组件中可以通过this.$store来获取到vuex中的仓库，从而可以在所有组件中共享状态，

3.在install中我们获取不到Vue的实例，所以这里通过beforeCreate来获取vue实例，拿到选项中的store对象

接下来就是模拟一下挂载的install方法

模拟 install 方法

function install (Vue) {
    _Vue = Vue
    _Vue.mixin({
        beforeCreate () {
            if (this.$options.store) {
               //  判断当前vue实例的$options中是否存在store,如果是组件实例那就没有这个store选项，就不需要做这件事情
                _Vue.prototype.$store = this.$options.store
            }
        } 
    })
}

最后我们导出一下就可以了

export default {
    Store,
    install
}