关于javascript:Vuex三-纯手写一个超简单的Vuex

首先导入vuex的是一个对象
应用use挂载到Vue的实例上，use办法调用vuex的install办法
调用new Vuex.Store办法初始化实例
传入参数是一个对象，外面有state、getters、mutations、actions等属性
应用的时候间接应用$store.state和$store.getters来拜访store外面的状态和getter
批改状态能够间接应用$store.commit提交mutation
在执行异步操作能够应用$store.dispatch散发action

下载模板

vuex-myvuex-demo-temp
外面应用了vuex进行简略的模仿操作，这里只是简略实现外面的state，getter，mutations，actions属性，其余的办法并不实现。

剖析模块构造

须要一个vuex的模块，这个模块须要导出一个install办法和一个Store类

let _Vue = nullclass Store {}// install接管一个参数，Vue构造函数，前面在Store类中还要应用构造函数,所以在全局定义一个_Vuefunction install (Vue) {  _Vue = Vue}export default {  Store,  install}

实现install函数

// install接管一个参数，Vue构造函数，前面在Store类中还要应用构造函数,所以在全局定义一个_Vuefunction install (Vue) {  _Vue = Vue  // 1. 创立Vue实例传入的store对象注入到Vue原型上的$store，在所有组件中用this.$store都能够获取到Vuex的仓库，从而共享状态  // 2. 这里咱们获取不到Vue的实例，所以这里通过混入beforeCreate来获取Vue实例，从而拿到选项中的store对象  _Vue.mixin({    beforeCreate () {      // 这里的this就是Vue的实例      // 首先判断以后Vue的实例的options中是否有store，当创立根实例的时候，会把store注入到Vue的实例上，如果是组件实例，并没有store选项就不须要做这件事件      if (this.$options.store) {        // 给Vue的原型上挂载$store        _Vue.prototype.$store = this.$options.store      }    }  })}

实现Store类

class Store {  // 构造函数接管一个参数是对象  constructor (options) {    // 这里对对象进行解构，并且赋默认值为空对象，防止没有传以后属性    const {      state = {},      getters = {},      mutations = {},      actions = {}    } = options    // 将state属性进行响应式解决    this.state = _Vue.observable(state)    // 对getters属性进行解决    // getters是一个对象，对象中有一些办法，这些办法都须要接管state参数，并且最终都有返回值，这些办法都是获取值，所以能够应用Object.defineProperty将这些办法转换成get拜访器    // 1. 先定义一个this.getters让内部能够间接拜访，而后初始化成一个没有原型对象的空对象    this.getters = Object.create(null)    // 2. 遍历所有的getters的key，把对应的key注册到this.getters对象中，定义一个get属性，返回key对应的getters中办法的执行后果，并传入state    Object.keys(getters).forEach(key => {      Object.defineProperty(this.getters, key, {        get: () => getters[key](state)      })    })    // 外部属性是公有属性，标识下划线_，不心愿内部拜访    // 对mutations属性进行解决    this._mutations = mutations    // 对actions属性进行解决    this._actions = actions  }  // 在commit办法中获取_mutations  // 接管两个参数，第一个参数是type，办法名称，第二个参数是payLoad，调用办法的参数  commit (type, payload) {    //通过type找到this._mutations中的办法并调用，传入参数payload    this._mutations[type](this.state, payload)  }  // 在dispatch办法中获取_actions  // 实现形式和commit一样  dispatch (type, payload) {    // 第一个参数是context，这里简略模仿就传入this，这个外面就有咱们须要的state，commit等    // 第二个参数是payload    this._actions[type](this, payload)  }}

替换vuex

将index.js中的vuex的导入替换成../myVuex，关上浏览器，能够看到mutation和actions能够失常执行

import Vuex from '../myVuex'

关于javascript:Vuex三-纯手写一个超简单的Vuex

目录

剖析Vuex的性能

下载模板

剖析模块构造

实现install函数

实现Store类

替换vuex