vuex实现原理

基本用法

引入vuex

import Vuex from 'vuex'
Vue.use(Vuex)

创建store实例

const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        increment(state,n = 1){
            state.count += n
        }
    },
    actions:{
        incrementAsync({commit}){
            setTimeout(()=>{
                commit("increment",2)
            },2000)
        }
    },
    getters: {
        score(state) {
          return `共扔出：${state.count}`
        }
      }
})

配置到Vue的根组件

new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

界面上使用

<template>
<div>
    <button @click="fire">扔一个</button>
    <button @click="fireDouble">蓄力扔两个</button>
    <h3>当前有：{{$store.state.count}}个</h3>
    <h2>{{$store.getters.score}}</h2>
</div>
</template>
<script>
export default {
    name:'vuexTest',
    data(){
        return {}
    },
    methods:{
        fire(){
            this.$store.commit('increment')
        },
        fireDouble(){
            this.$store.dispatch('incrementAsync')
        }
    }
}
</script>

根据用法反推实现原理

• 这是一个插件，所以需要有install方法
• 需要有一个Store的类
• 需要实现state,mutations,actions,getters
• 实现数据响应式

实现

install方法

// mvuex.js
//  _Vue是调用Vue.use方法传入的Vue对象，所以Vue.use方法必须要在新建store实例之前。不需要导入Vue对象
function install(_Vue){
    Vue = _Vue
    Vue.mixin({
        beforeCreate(){
            if(this.$options.store){
            	//  只有root元素才有store
                Vue.prototype.$store = this.$options.store
            }
        }
    })
}

Store类

// mvuex.js
let Vue
class Store {
	//  options是Store在实例化传入的配置项
    constructor(options){
    	//  借助vue的数据响应式
        this.state = new Vue({
            data:options.state
        })
        //  保存传入的mutations和actions
        this.mutations = options.mutations
        this.actions = options.actions
        //  如果有getters就处理getters
        options.getters && this.handleGetters(options.getters)
    }
	// 注意这里用箭头函数形式，后面actions实现时会有作用
    commit = (type,arg) => {
        this.mutations[type](this.state,arg)
    };
    dispatch(type,arg){
        this.actions[type]({commit:this.commit,state:this.state},arg)
    }
    handleGetters(getters){
        this.getters = {}
        //  只需定义get属性，保证可读
        Object.keys(getters).forEach(key => {
        	//  这些属性都是只读的
            Object.defineProperty(this.getters,key,{
                get:()=>{
                    return getters[key](this.state)
                }
            })
        })
    }
}
export default { Store, install };

验证