手写实现vuex

手写vuex

1.vuex是什么？

Vuex是专为Vue.js应用程序开发的全局状态管理器。这里我们可以把它拆成两部分来理解：一个是“全局状态管理”，一个是“专为Vue开发”

组件通信的过程图

store注入组件install方法
vuex是通过vue插件机制将组件注入的
首先使用vuex,需要安装插件：

Vue.use(Vuex); // vue的插件机制,安装vuex插件

实现状态管理器
1.vue.use 就是必须要使用一个固定的方式才可以添加方法
必须是一个install 方法

// 插件的固定方法
const install = (v) =>{
    Vue = v
   //混合器
   Vue.mixin({ // 需要在每个组件上添加$store
    // 在组件创建前
      beforeCreate(){
        // console.log(this.$options,'10')
        // 跟组件 并且 跟组件也存在store属性
        if (this.$options && this.$options.store) {
            // console.log(this.$options.store, '跟组件存在')
            this.$store = this.$options.store
        }else{
        // b不是跟节点 就会有一个父节点 以此类推
          this.$store = this.$parent && this.$parent.$store
        }
      }
  })
}
//可见，store注入 vue的实例组件的方式，是通过vue的 mixin机制
//借助vue组件的生命周期 钩子 beforeCreate 完成的。即 每个vue组件
//实例化过程中，会在 beforeCreate 钩子前调用 vuexInit 方法

mixin 的理解混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混合对象可以包含任意组件选项。
当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
2.实现getters

let getters = options.getters || {}
  this.getters = {} //当前实力对象
    Object.keys(getters).forEach(getterName => {
    	// 给当前函数定义一个属性
        Object.defineProperty(this.getters,getterName,{
              get : () =>{
              // getters当前传过来的对象
                return getters[getterName](this.state)
          }
       })
 })
// 从上面源码，我们可以看出Vuex的state状态是响应式，
//是借助vue的data是响应式，将state存入vue实例组件的data中；
//Vuex的getters则是借助vue的计算属性computed实现数据实时监听。
// get 方法 给state添加一个get方法
get state () {
      return this.vm.state
}

3.实现mutations

let mutations = options.mutations || {}
     this.mutations = {}
    Object.keys(mutations).forEach(mutationName => {
    // 在当前对象上定义一个方法
          this.mutations[mutationName] = payload => {
           //外面对象传过来的对象[方法名字]state，payload
              mutations[mutationName](this.state,payload)
          }
  })
//使用commit方法
commit = (method,payload) => {
   this.mutations[method](payload)
 }

4.实现actions

let actions = options.actions || {}
 this.actions = {}
     Object.keys(actions).forEach(actionsName =>{
        this.actions[actionsName] = payload => {
           console.log(this,payload,31)
           actions[actionsName](this,payload)
     }
 })

5.异步增加问题
小结：
Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。