Vuex框架原理与源码分析

/**
 *  store.js文件
 *  创建store对象，配置state、action、mutation以及getter
 *   
 **/import Vue from 'vue'import Vuex from 'vuex'// install Vuex框架
Vue.use(Vuex)

// 创建并导出store对象。为了方便，不配置任何参数
export default new Vuex.Store()

复制

/**
 *  vue-index.js文件
 *  
 *
 **/import Vue from 'vue'import App from './../pages/app.vue'import store from './store.js'new Vue({
  el: '#root',
  router,
  store, 
  render: h => h(App)
})

复制

let Vue

复制

// auto install in dist mode  if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)  
}

复制

function (plugin: Function | Object) {  /* istanbul ignore if */
  if (plugin.installed) {    return
  }  // additional parameters
  const args = toArray(arguments, 1)
  args.unshift(this)  if (typeof plugin.install === 'function') {    // 实际执行插件的install方法
    plugin.install.apply(plugin, args)
  } else {
    plugin.apply(null, args)
  }
  plugin.installed = true
  return this}

复制

function install (_Vue) {  if (Vue) {    console.error(      '[vuex] already installed. Vue.use(Vuex) should be called only once.'
    )    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

复制

export default function (Vue) {  const version = Number(Vue.version.split('.')[0])  if (version >= 2) {    const usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1
    Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })
  } else {    // override init and inject vuex init procedure
    // for 1.x backwards compatibility.
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {}) {
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit
      _init.call(this, options)
    }
  }

复制

function vuexInit () {  const options = this.$options  // store injection
  if (options.store) {    this.$store = options.store
  } else if (options.parent && options.parent.$store) {    this.$store = options.parent.$store
  }
}

复制

constructor (options = {}) {
  assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
  assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)

复制

function assert (condition, msg) {  if (!condition) throw new Error(`[vuex] ${msg}`)
}

复制

const {
    state = {},
    plugins = [],
    strict = false} = options// store internal statethis._committing = false // 是否在进行提交状态标识this._actions = Object.create(null) // acitons操作对象this._mutations = Object.create(null) // mutations操作对象this._wrappedGetters = Object.create(null) // 封装后的getters集合对象this._modules = new ModuleCollection(options) // Vuex支持store分模块传入，存储分析后的modulesthis._modulesNamespaceMap = Object.create(null) // 模块命名空间mapthis._subscribers = [] // 订阅函数集合，Vuex提供了subscribe功能this._watcherVM = new Vue() // Vue组件用于watch监视变化

复制

constructor (rawRootModule) {  // register root module (Vuex.Store options)
  this.root = new Module(rawRootModule, false)  // register all nested modules
  if (rawRootModule.modules) {
    forEachValue(rawRootModule.modules, (rawModule, key) => {      this.register([key], rawModule, false)
    })
  }

复制

// bind commit and dispatch to selfconst store = thisconst { dispatch, commit } = thisthis.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)
}

复制

dispatch (_type, _payload) {  // check object-style dispatch
  const {
      type,
      payload
  } = unifyObjectStyle(_type, _payload) // 配置参数处理

  // 当前type下所有action处理函数集合
  const entry = this._actions[type]  if (!entry) {    console.error(`[vuex] unknown action type: ${type}`)    return
  }  return entry.length > 1
      ? Promise.all(entry.map(handler => handler(payload)))
      : entry[0](payload)
}

复制

commit (_type, _payload, _options) {  // check object-style commit
  const {
      type,
      payload,
      options
  } = unifyObjectStyle(_type, _payload, _options)  const mutation = { type, payload }  const entry = this._mutations[type]  if (!entry) {    console.error(`[vuex] unknown mutation type: ${type}`)    return
  }  // 专用修改state方法，其他修改state方法均是非法修改
  this._withCommit(() => {
    entry.forEach(function commitIterator (handler) {
      handler(payload)
    })
  })  // 订阅者函数遍历执行，传入当前的mutation对象和当前的state
  this._subscribers.forEach(sub => sub(mutation, this.state))  if (options && options.silent) {    console.warn(        `[vuex] mutation type: ${type}. Silent option has been removed. ` +        'Use the filter functionality in the vue-devtools'
    )
  }
}

复制

_withCommit (fn) {  // 保存之前的提交状态
  const committing = this._committing  // 进行本次提交，若不设置为true，直接修改state，strict模式下，Vuex将会产生非法修改state的警告
  this._committing = true

  // 执行state的修改操作
  fn()  // 修改完成，还原本次修改之前的状态
  this._committing = committing
}

复制

// strict modethis.strict = strict// init root module.// this also recursively registers all sub-modules// and collects all module getters inside this._wrappedGettersinstallModule(this, state, [], this._modules.root)

复制

function installModule (store, rootState, path, module, hot) {  const isRoot = !path.length  const namespace = store._modules.getNamespace(path)  // register in namespace map
  if (namespace) {
    store._modulesNamespaceMap[namespace] = module
  }  // 非根组件设置 state 方法
  if (!isRoot && !hot) {    const parentState = getNestedState(rootState, path.slice(0, -1))    const moduleName = path[path.length - 1]
    store._withCommit(() => {
      Vue.set(parentState, moduleName, module.state)
    })
  }

  ······

复制

function getNestedState (state, path) {  return path.length
    ? path.reduce((state, key) => state[key], state)
    : state
}

复制

const local = module.context = makeLocalContext(store, namespace, path)

复制

// 注册对应模块的mutation，供state修改使用module.forEachMutation((mutation, key) => {  const namespacedType = namespace + key
  registerMutation(store, namespacedType, mutation, local)
})// 注册对应模块的action，供数据操作、提交mutation等异步操作使用module.forEachAction((action, key) => {  const namespacedType = namespace + key
  registerAction(store, namespacedType, action, local)
})// 注册对应模块的getters，供state读取使用module.forEachGetter((getter, key) => {  const namespacedType = namespace + key
  registerGetter(store, namespacedType, getter, local)
})

复制

function registerMutation (store, type, handler, local) {  // 取出对应type的mutations-handler集合
  const entry = store._mutations[type] || (store._mutations[type] = [])  // commit实际调用的不是我们传入的handler，而是经过封装的
  entry.push(function wrappedMutationHandler (payload) {    // 调用handler并将state传入
    handler(local.state, payload)
  })
}

复制

function registerAction (store, type, handler, local) {  // 取出对应type的actions-handler集合
  const entry = store._actions[type] || (store._actions[type] = [])  // 存储新的封装过的action-handler
  entry.push(function wrappedActionHandler (payload, cb) {    // 传入 state 等对象供我们原action-handler使用
    let res = handler({
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload, cb)    // action需要支持promise进行链式调用，这里进行兼容处理
    if (!isPromise(res)) {
      res = Promise.resolve(res)
    }    if (store._devtoolHook) {      return res.catch(err => {
        store._devtoolHook.emit('vuex:error', err)        throw err
      })
    } else {      return res
    }
  })
}function registerGetter (store, type, rawGetter, local) {  // getters只允许存在一个处理函数，若重复需要报错
  if (store._wrappedGetters[type]) {    console.error(`[vuex] duplicate getter key: ${type}`)    return
  }  // 存储封装过的getters处理函数
  store._wrappedGetters[type] = function wrappedGetter (store) {    // 为原getters传入对应状态
    return rawGetter(
      local.state, // local state
      local.getters, // local getters
      store.state, // root state
      store.getters // root getters
    )
  }
}

复制

module.forEachChild((child, key) => {
  installModule(store, rootState, path.concat(key), child, hot)
})

复制

/
 *  store-index.js store配置文件
 *
 /

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    cart,
    products
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

复制

/**
 *  cart.js
 *
 **/const state = {
  added: [],
  checkoutStatus: null}/**
 *  products.js
 *
 **/const state = {
  all: []
}

复制

/**
 *  Cart.vue 省略template代码，只看script部分
 *
 **/export default {
  methods: {    // 购物车中的购买按钮，点击后会触发结算。源码中会调用 dispatch方法
    checkout (products) {      this.$store.dispatch('checkout', products)
    }
  }
}

复制

const actions = {
  checkout ({ commit, state }, products) {    const savedCartItems = [...state.added] // 存储添加到购物车的商品
    commit(types.CHECKOUT_REQUEST) // 设置提交结算状态
    shop.buyProducts( // 提交api请求，并传入成功与失败的cb-func
      products,
      () => commit(types.CHECKOUT_SUCCESS), // 请求返回成功则设置提交成功状态
      () => commit(types.CHECKOUT_FAILURE, { savedCartItems }) // 请求返回失败则设置提交失败状态
    )
  }
}

复制

function wrappedActionHandler (payload, cb) {    let res = handler({
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload, cb)    if (!isPromise(res)) {
      res = Promise.resolve(res)
    }    if (store._devtoolHook) {      return res.catch(err => {
        store._devtoolHook.emit('vuex:error', err)        throw err
      })
    } else {      return res
    }
  }

复制

// initialize the store vm, which is responsible for the reactivity// (also registers _wrappedGetters as computed properties)resetStoreVM(this, state)

复制

function resetStoreVM (store, state) {  const oldVm = store._vm // 缓存前vm组件

  // bind store public getters
  store.getters = {}  const wrappedGetters = store._wrappedGetters  const computed = {}  // 循环所有处理过的getters，并新建computed对象进行存储，通过Object.defineProperty方法为getters对象建立属性，使得我们通过this.$store.getters.xxxgetter能够访问到该getters
  forEachValue(wrappedGetters, (fn, key) => {    // use computed to leverage its lazy-caching mechanism
    computed[key] = () => fn(store)    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key],
      enumerable: true // for local getters
    })
  })  // use a Vue instance to store the state tree
  // suppress warnings just in case the user has added
  // some funky global mixins
  const silent = Vue.config.silent  // 暂时将Vue设为静默模式，避免报出用户加载的某些插件触发的警告
  Vue.config.silent = true   
  // 设置新的storeVm，将当前初始化的state以及getters作为computed属性（刚刚遍历生成的）
  store._vm = new Vue({
    data: { state },
    computed
  })  // 恢复Vue的模式
  Vue.config.silent = silent  // enable strict mode for new vm
  if (store.strict) {    // 该方法对state执行$watch以禁止从mutation外部修改state
    enableStrictMode(store)
  }  // 若不是初始化过程执行的该方法，将旧的组件state设置为null，强制更新所有监听者(watchers)，待更新生效，DOM更新完成后，执行vm组件的destroy方法进行销毁，减少内存的占用
  if (oldVm) {    // dispatch changes in all subscribed watchers
    // to force getter re-evaluation.
    store._withCommit(() => {
      oldVm.state = null
    })
    Vue.nextTick(() => oldVm.$destroy())
  }
}

复制

function enableStrictMode (store) {
  store._vm.$watch('state', () => {
    assert(store._committing, `Do not mutate vuex store state outside mutation handlers.`)
  }, { deep: true, sync: true })
}

复制

plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))

复制

// 1. 触发Vuex组件初始化的hookdevtoolHook.emit('vuex:init', store)// 2. 提供“时空穿梭”功能，即state操作的前进和倒退devtoolHook.on('vuex:travel-to-state', targetState => {
  store.replaceState(targetState)
})// 3. mutation被执行时，触发hook，并提供被触发的mutation函数和当前的state状态store.subscribe((mutation, state) => {
  devtoolHook.emit('vuex:mutation', mutation, state)
})

复制