详解vuex之store源码简单解析

关于vuex的基础部分学习于https://www.Vevb.com/article/163008.htm

使用Vuex的时候，通常会实例化Store类，然后传入一个对象，包括我们定义好的actions、getters、mutations、state等。store的构造函数：

export class Store { constructor (options = {}) {  // 若window内不存在vue，则重新定义Vue  if (!Vue && typeof window !== 'undefined' && window.Vue) {   install(window.Vue)  }  if (process.env.NODE_ENV !== 'production') {   // 断言函数，来判断是否满足一些条件   // 确保 Vue 的存在   assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)   // 确保 Promsie 可以使用   assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)   assert(this instanceof Store, `store must be called with the new operator.`)  }  // 解构赋值，拿到options里的plugins和strict  const {   plugins = [],   strict = false  } = options  // 创建内部属性  // 标志一个提交状态，作用是保证对 Vuex 中 state 的修改只能在 mutation 的回调函数中，而不能在外部随意修改 state  this._committing = false   // 用来存储用户定义的所有的actions  this._actions = Object.create(null)  this._actionSubscribers = []  // 用来存储用户定义所有的mutatins  this._mutations = Object.create(null)  // 用来存储用户定义的所有getters   this._wrappedGetters = Object.create(null)  // 用来存储所有的运行时的 modules  this._modules = new ModuleCollection(options)  this._modulesNamespaceMap = Object.create(null)  // 用来存储所有对 mutation 变化的订阅者  this._subscribers = []  // 一个 Vue对象的实例，主要是利用 Vue 实例方法 $watch 来观测变化的  this._watcherVM = new Vue()  // 把Store类的dispatch和commit的方法的this指针指向当前store的实例上  const store = this  const { dispatch, commit } = this  this.dispatch = function boundDispatch (type, payload) {   return dispatch.call(store, type, payload)  }  this.commit = function boundCommit (type, payload, options) {   return commit.call(store, type, payload, options)  }  // 是否开启严格模式  this.strict = strict  const state = this._modules.root.state  // Vuex的初始化的核心，其中，installModule方法是把我们通过options传入的各种属性模块注册和安装；  // resetStoreVM 方法是初始化 store._vm，观测 state 和 getters 的变化；最后是应用传入的插件。  installModule(this, state, [], this._modules.root)  resetStoreVM(this, state)  plugins.forEach(plugin => plugin(this))  const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools  if (useDevtools) {   devtoolPlugin(this)  } }

Vuex本身是单一状态树，应用的所有状态都包含在一个大对象内，随着我们应用规模的不断增长，这个Store变得非常臃肿。为了解决这个问题，Vuex允许我们把store分模块。每一个模块包含各自的state、mutations、actions和getters，甚至还可以嵌套模块。