关于vuex:手写vuex原理解析

应用 vue 过程中难免会用到 vuex，然而很多时候咱们只晓得如何应用它但却不明确外部运行机制，上面咱们来简略手写一下 vuex 的实现过程。

简介

Vuex 是一个专为 Vue.js 利用程序开发的 状态管理模式 。其 集中式 的存储了利用所有组件的状态，并且制订了绝对应的规定以便保障组件状态能够朝着 可预测 的方向发生变化。

首先须要理解 vuex 的几个外围概念：

• State 繁多状态树，惟一数据源
• Mutation 状态更改函数
• Action 蕴含任意异步操作
• Getter state 中派生出一些状态，相似计算属性
• Module store 模块宰割机制，
• store 蕴含以上概念的容器

对这些概念不分明的能够观看 vuex 官网进行进一步理解：https://vuex.vuejs.org/zh/

vuex 原理解析

首先 vuex 是一个插件，咱们须要去申明一个 store 类，还要有个 install 办法去挂载 $store。
store 的具体实现过程：

1、创立响应式的 state, 保留 mutations,actions 与 getters。
2、实现 commit 依据用户传入 type 执行对应 mutation。
3、实现 dispatch 依据传入的 type 生成对应的 action，同时传递数据。
4、实现 getters，依照 getters 定义对 state 派生数据。

首先设计 vuex 根本数据：

import Vue from 'vue'
import Vuex from './vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {counter: 0,},
  mutations: {add(state) {state.counter++}
  },
  actions: {
    // 参数怎么来的？add({commit}) {
      // 业务逻辑组合或者异步
      setTimeout(() => {commit('add')
      }, 1000);
    }
  },
  getters: {
    doubleCounter: state => {return state.couter*2;},
  },
  modules: {}})

1. 对 store 类的申明，install 办法实现。

let Vue;
// 申明 Store 类
class Store {constructor(options = {}) {

 this._vm = new Vue({
 // data 中的值都会做响应化解决
     data: { 
        // 相当于总线
        $$state:options.state
     }
  });
 }

 get state() {
    // 存取器使之成为只读
    return this._vm._data.$$state 
 }

 set state(v) {console.error('please use replaceState to reset state'); 
 } }

function install(_Vue) {
 Vue = _Vue; 

 Vue.mixin({beforeCreate() {if (this.$options.store) {
         // this.$options 为 Vue 实例的初始化选项
            Vue.prototype.$store = this.$options.store; 
         } 
     }
  });
}

export default {Store, install};

这里有两点值得注意，源码中 state 利用 vue 的 data 的响应式。利用存取器，把 state 设置成只读属性。
这里双 $ 定义 state 第一次看上去必定有点不解，这里是为了 Vue 不做代理。

2. 实现 commit: 依据用户传入 type 获取并执行对应 mutation

class Store {constructor(options = {}) { 
        // 保留用户配置的 mutations 选项
        this._mutations = options.mutations || {}} 

    commit(type, payload) {  
        // 获取 type 对应的 mutation  
        const entry = this._mutations[type]

        if (!entry) {console.error(`unknown mutation type: ${type}`);
            return 
        }
        // 指定上下文为 Store 实例  
        // 传递 state 给 mutation entry(this.state, payload);
        entry(this.state, payload)
    }
}

这里的 entry 是 mutations 外面定义的 add 办法，payload 是传入的参数。

3. 实现 actions: 依据用户传入 type 获取并执行对应 action

class Store {constructor(options) {
    this._actions = options.actions

    // 锁死 commit,dispatch 函数 this 指向
    const store = this
    const {commit, dispatch} = store
    this.commit = function boundCommit(type, payload) {commit.call(store, type, payload)
    }
    this.dispatch = function boundDispatch(type, payload) {dispatch.call(store, type, payload)
    }
  }

  // dispatch，执行异步工作或简单逻辑
  dispatch(type, payload) {
    // 1. 获取 action
    const entry = this._actions[type]

    if (!entry) {console.error('哎呦，没有这个 action');
      return;
    }

    // 异步后果解决经常须要返回 Promise
    return entry(this, payload)

  }
}

这里对 dispatch 和 commit 做了 this 的绑定，必须绑定 commit 上下文否则 action 中调用 commit 时可能出问题
3. 实现 getters:state 的动静计算属性

class Store {constructor(options) {
    const store = this

    this._wrappedGetters = options.getters

    // 定义 computed 选项
    const computed = {}
    this.getters = {}
    Object.keys(this._wrappedGetters).forEach(key => {
      // 获取用户定义的 getter
      const fn = store._wrappedGetters[key]
      // 转换为 computed 能够应用无参数模式
      computed[key] = function() {return fn(store.state)
      }
      // 为 getters 定义只读属性
      Object.defineProperty(store.getters, key, {get: () => store._vm[key]
      })
    })

    this._vm = new Vue({
      // data 中的值都会做响应化解决
      data: {$$state: options.state},
      // 利用 vue 的 computed 计算属性
      computed
    })
}

这里看起来简单认真拆分每一个看，其实很简略。

最终实现成果