剖析vuex源码，为手写mini版vuex提供基础思路

2023-09-27 10:43:04

在当今瞬息万变的前端开发领域，掌握vuex的使用已成为前端工程师的必备技能。vuex作为vue框架中的重要工具，凭借其强大的状态管理功能，让许多开发者在开发大型前端项目时受益匪浅。

但对于刚接触vuex的新手而言，vuex的原理和实现过程可能是一个谜。为了帮助大家更好地理解vuex，本文将带你深入vuex的源码，通过剖析它的执行过程，为你提供构建手写版mini vuex的基础思路。

vuex源码分析

vuex的源码位于vuex的GitHub仓库中，分为几个主要模块：

store.js：负责创建和管理store实例。
vuex.js：提供全局API，如mapState、mapActions等。
module.js：提供模块化支持。
logger.js：提供日志记录功能。

其中，store.js是vuex的核心模块，负责创建和管理store实例。在store.js中，我们定义了store的构造函数，它接收一个配置对象作为参数，该对象包含state、mutations、actions、getters等属性。

export default class Store {
  constructor(options = {}) {
    this._mutations = Object.create(null)
    this._actions = Object.create(null)
    this._wrappedGetters = Object.create(null)
    this._subscribers = []
    this._watcherVM = new Vue()

    const store = this
    const {
      state = {},
      mutations = {},
      actions = {},
      getters = {}
    } = options

    this.strict = false
    this._committing = false
    this._subscribers = []

    // bind dispatch to self
    const dispatch = function boundDispatch(type, payload) {
      return store.dispatch(type, payload)
    }
    dispatch.prototype = store

    // bind mutations to self
    const commit = function boundCommit(type, payload, options) {
      return store.commit(type, payload, options)
    }
    commit.prototype = store

    // 处理mutations
    installModule(this, state, [], this._mutations, mutations, undefined, dispatch, commit)

    // 处理actions
    installModule(this, null, [], this._actions, actions, undefined, dispatch, commit)

    // 处理getters
    installModule(this, null, [], this._wrappedGetters, getters, undefined, dispatch, commit)

    resetStoreVM(this, state)
  }
}

在store构造函数中，我们首先定义了一些属性，如_mutations、_actions、_wrappedGetters等，这些属性用于存储mutation、action和getter。然后，我们定义了一些方法，如dispatch、commit等，这些方法用于触发mutation和action。

接下来，我们调用installModule函数来处理module。installModule函数是一个递归函数，它将state、mutation、action和getter等属性逐层安装到store中。

最后，我们调用resetStoreVM函数来重置store的VM。resetStoreVM函数会创建一个新的Vue实例，并将store的state作为其data。

vuex执行过程

vuex的执行过程主要分为以下几个步骤：

触发mutation ：当我们调用store.commit方法时，就会触发mutation。mutation是一个同步操作，它可以直接修改store中的state。
执行getter ：当我们调用store.getters方法时，就会执行getter。getter是一个同步操作，它可以从store的state中获取数据。
触发action ：当我们调用store.dispatch方法时，就会触发action。action是一个异步操作，它可以执行一些异步操作，如发起网络请求等。
更新组件 ：当mutation或action执行完毕后，vuex会自动更新受影响的组件。

手写mini版vuex

在理解了vuex的原理和执行过程后，我们就可以着手构建一个手写版的mini vuex了。

首先，我们需要定义一个store类，这个类将负责创建和管理store实例。

class Store {
  constructor(options = {}) {
    this._state = options.state
    this._mutations = options.mutations
    this._actions = options.actions
    this._getters = options.getters
    this._subscribers = []
  }

  getState() {
    return this._state
  }

  commit(type, payload) {
    const mutation = this._mutations[type]
    if (!mutation) {
      throw new Error(`Mutation ${type} not found`)
    }
    mutation(this._state, payload)
  }

  dispatch(type, payload) {
    const action = this._actions[type]
    if (!action) {
      throw new Error(`Action ${type} not found`)
    }
    action(this, payload)
  }

  subscribe(fn) {
    this._subscribers.push(fn)
  }

  unsubscribe(fn) {
    const index = this._subscribers.indexOf(fn)
    if (index > -1) {
      this._subscribers.splice(index, 1)
    }
  }
}