实现一个简单的vuex

首先我们先看下vuex的使用方式一般都是下面这样的

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    changeCount (state,num) {
      state.count += num
    }
  },
  actions: {
    changeCount (context,num) {
      setTimeout(()=>{
        context.commit('changeCount',num)
      },2000)
    }
  },
  getters: {
    doubleCount (state){
      return state.count*2
    }
  }
})

有个组件是这样的

<template>
  <div>
    <div>数量--{{$store.state.count}}</div>
    <div>双倍数量--{{$store.getters.doubleCount}}</div>
    <button @click="handleClick">点击加1</button>
    <button @click="deferHandleClick">点击延迟加2</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods:{
    handleClick () {
      this.$store.commit('changeCount',1)
    },
    deferHandleClick () {
      this.$store.dispatch('changeCount',2)
    }
  }
}
</script>

我们要实现一个vuex主要有几个要点

• vuex是一个插件，通过Vue.use使用
• vuex里面有一个store类
• 实现state,mutations,actions,getters
• state改变的时候 通知组件数据变更

首先vuex是这样使用的

image.png

vuex里面有一个Store类，然后知道vuex是一个插件，通过Vue.use使用。
那么我们新建一个kVuex.js，代码里面应该有个Store类和一个install方法，大概是这样的

class Store {
}
function install(_vue) { // install方法接受一个vue的形参
}
export default {Store,install}

我们的main.js是这样的 把引入的store挂载到了vue根组件上

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

所以我们的install方法是这样的

let Vue; 
class Store {
}
function install(_vue) {// 接受一个参数 是vue
 Vue = _vue // 这里我们保存一下vue 一会还要用
  Vue.mixin({ // Vue构造器注入beforeCreate方法
    beforeCreate() {
      if(this.$options.store){ // 因为在上面代码中store只挂载到了根组件 所以下面的代码只在根组件执行
        Vue.prototype.$store = this.$options.store
      }
    }
  })
}
export default {Store,install}

现在我们开始实现state,要知道我们的state是响应式的，state发生变化的时候，组件会发生变化

let Vue;
class Store {
  constructor (options){
    this.state = new Vue({ // 利用vue的数据响应式原理 这也是为什么vuex只能在vue里用的原因
      data:{
        state:options.state
      }
    })
  }
}
function install(_vue) {
  Vue = _vue
  Vue.mixin({
    beforeCreate() {
      if(this.$options.store){
        Vue.prototype.$store = this.$options.store
      }
    }
  })
}
export default {Store,install}

实现mutations我们只需要加个映射就可以，但是我们是通过commit调用的，所以我们要实现commit方法

let Vue;
class Store {
  constructor (options){
    this.state = new Vue({ // 利用vue的数据响应式原理
      data:options.state
    })
    this.mutations = options.mutations;//传进来的mutations
  }
  commit = (type,arg)=>{ // commit方法接受一个类型和参数 类型就是你调用的时候传的方法名
    // 在组件里我们是这样用的this.$store.commit('changeCount',1)
    this.mutations[type](this.state,arg) // 执行mutations里面的方法
  }
}
function install(_vue) {
  Vue = _vue
  Vue.mixin({
    beforeCreate() {
      if(this.$options.store){
        Vue.prototype.$store = this.$options.store
      }
    }
  })
}
export default {Store,install}

实现actions一样也是加个映射关系。但是我们还要实现dispatch方法

let Vue;
class Store {
  constructor (options){
    this.state = new Vue({ // 利用vue的数据响应式原理
      data:options.state
    })
    this.mutations = options.mutations;//传进来的mutations
    this.actions = options.actions;//传进来的actions
  }
  commit = (type,arg)=>{ // commit方法接受一个类型和参数 类型就是你调用的时候传的方法名
    // 在组件里我们是这样用的this.$store.commit('changeCount',1)
    this.mutations[type](this.state,arg) // 执行mutations里面的方法
  }
  dispatch (type,arg) {// dispatch方法接受一个类型和参数 类型就是你调用的时候传的方法名
    this.actions[type]({
      commit:this.commit
    },arg)
  }
}
function install(_vue) {// 接受一个参数 是vue
  Vue = _vue // 这里我们保存一下vue 一会还要用
  Vue.mixin({ // Vue构造器注入beforeCreate方法
    beforeCreate() {
      if(this.$options.store){ // 因为在上面代码中store只挂载到了根组件 所以下面的代码只在根组件执行
        Vue.prototype.$store = this.$options.store
      }
    }
  })
}
export default {Store,install}

实现getters 就不能简单的加个映射了

let Vue;
class Store {
  constructor (options){
    this.state = new Vue({ // 利用vue的数据响应式原理
      data:options.state
    })
    this.mutations = options.mutations;//传进来的mutations
    this.actions = options.actions;//传进来的actions
    this.getters = {}; //添加getters为{}
    options.getters && this.handleGetter(options.getters) // 当传入的getters存在的话 执行handleGetter
  }
  commit = (type,arg)=>{ // commit方法接受一个类型和参数 类型就是你调用的时候传的方法名
    // 在组件里我们是这样用的this.$store.commit('changeCount',1)
    this.mutations[type](this.state,arg) // 执行mutations里面的方法
  }
  dispatch (type,arg) {// dispatch方法接受一个类型和参数 类型就是你调用的时候传的方法名
    // 在组件里我们是这样用的this.$store.dispatch('changeCount',2)
    this.actions[type]({  // 执行actions里面的方法
      commit:this.commit
    },arg)
  }
  handleGetter (getters){
    Object.keys(getters).forEach(key=>{ // 拿出getters的key做一个循环
      Object.defineProperty(this.getters,key,{ // 给this.getter添加属性，属性名为key这个变量，并添加get方法
        get: ()=> {
          return getters[key](this.state) // 执行getters里面的方法传参   并return出去
        }
      })
    })
  }
}
function install(_vue) {// 接受一个参数 是vue
  Vue = _vue // 这里我们保存一下vue 一会还要用
  Vue.mixin({ // Vue构造器注入beforeCreate方法
    beforeCreate() {
      if(this.$options.store){ // 因为在上面代码中store只挂载到了根组件 所以下面的代码只在根组件执行
        Vue.prototype.$store = this.$options.store
      }
    }
  })
}
export default {Store,install}

到此我们这个简单的vuex就完成了