VueX源码分析（4）

VueX源码分析(4)

/module
store.js

/module/module.js

import { forEachValue } from '../util'

// Base data struct for store's module, package with some attribute and method

export default class Module {

  constructor (rawModule, runtime) {

    this.runtime = runtime

    // Store some children item

    this._children = Object.create(null)

    // Store the origin module object which passed by programmer

    this._rawModule = rawModule

    const rawState = rawModule.state

    // Store the origin module's state

    this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}

  }

  get namespaced () {

    return !!this._rawModule.namespaced

  }

  addChild (key, module) {

    this._children[key] = module

  }

  removeChild (key) {

    delete this._children[key]

  }

  getChild (key) {

    return this._children[key]

  }

  update (rawModule) {

    this._rawModule.namespaced = rawModule.namespaced

    if (rawModule.actions) {

      this._rawModule.actions = rawModule.actions

    }

    if (rawModule.mutations) {

      this._rawModule.mutations = rawModule.mutations

    }

    if (rawModule.getters) {

      this._rawModule.getters = rawModule.getters

    }

  }

  forEachChild (fn) {

    forEachValue(this._children, fn)

  }

  forEachGetter (fn) {

    if (this._rawModule.getters) {

      forEachValue(this._rawModule.getters, fn)

    }

  }

  forEachAction (fn) {

    if (this._rawModule.actions) {

      forEachValue(this._rawModule.actions, fn)

    }

  }

  forEachMutation (fn) {

    if (this._rawModule.mutations) {

      forEachValue(this._rawModule.mutations, fn)

    }

  }

}

解析：

Module是store模块的类，基本模块的静态属性和一些方法
rawModule就是我们定义的模块对象{ namespaced, state, actions, mutations, getters }
this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}定义状态可以用函数的方式定义的，这里要先判断状态是不是函数，是函数要执行函数后的值。
_children记录嵌套模块的模块{ state, modules: { modules: {} } }
namespaced就是是否使用命名空间
addChild、removeChild、getChild是嵌套模块的一些操作方法
还有一些遍历的方法但是只有children、getters、actions、mutations的遍历，没有this.state，那个update模块也是，不会更新state
更新只更新namespaced、actions、mutations、getters

/module/module-collection.js

主要类ModuleCollection，还有一些辅助函数，先分析辅助函数再分析主要类。

主要将所有模块合并的类。

断言函数（只在开发者环境起作用）

const functionAssert = {

  assert: value => typeof value === 'function',

  expected: 'function'

}

const objectAssert = {

  assert: value => typeof value === 'function' ||

    (typeof value === 'object' && typeof value.handler === 'function'),

  expected: 'function or object with "handler" function'

}

const assertTypes = {

  getters: functionAssert,

  mutations: functionAssert,

  actions: objectAssert

}

function assertRawModule (path, rawModule) {

  Object.keys(assertTypes).forEach(key => {

    if (!rawModule[key]) return

    const assertOptions = assertTypes[key]

    forEachValue(rawModule[key], (value, type) => {

      assert(

        assertOptions.assert(value),

        makeAssertionMessage(path, key, type, value, assertOptions.expected)

      )

    })

  })

}

function makeAssertionMessage (path, key, type, value, expected) {

  let buf = `${key} should be ${expected} but "${key}.${type}"`

  if (path.length > 0) {

    buf += ` in module "${path.join('.')}"`

  }

  buf += ` is ${JSON.stringify(value)}.`

  return buf

}

解析：

path是嵌套模块的名称。如根模块为[]，嵌套模块shop/card为['shop', 'card']。主要功能是模块的寻址路径，可以根据这个路径获取该模块。
makeAssertionMessage(path, key, type, value, expected)中的key就是我们自定义模块的字段：如state、mutations等，这个断言就是判断我们定义的字段命是否符合要求。

ModuleCollection

export default class ModuleCollection {

  constructor (rawRootModule) {

    // register root module (Vuex.Store options)

    this.register([], rawRootModule, false)

  }

  get (path) {

    return path.reduce((module, key) => {

      return module.getChild(key)

    }, this.root)

  }

  getNamespace (path) {

    let module = this.root

    return path.reduce((namespace, key) => {

      module = module.getChild(key)

      return namespace + (module.namespaced ? key + '/' : '')

    }, '')

  }

  update (rawRootModule) {

    update([], this.root, rawRootModule)

  }

  register (path, rawModule, runtime = true) {

    if (process.env.NODE_ENV !== 'production') {

      assertRawModule(path, rawModule)

    }

    const newModule = new Module(rawModule, runtime)

    if (path.length === 0) {

      this.root = newModule

    } else {

      const parent = this.get(path.slice(0, -1))

      parent.addChild(path[path.length - 1], newModule)

    }

    // register nested modules

    if (rawModule.modules) {

      forEachValue(rawModule.modules, (rawChildModule, key) => {

        this.register(path.concat(key), rawChildModule, runtime)

      })

    }

  }

  unregister (path) {

    const parent = this.get(path.slice(0, -1))

    const key = path[path.length - 1]

    if (!parent.getChild(key).runtime) return

    parent.removeChild(key)

  }

}

function update (path, targetModule, newModule) {

  if (process.env.NODE_ENV !== 'production') {

    assertRawModule(path, newModule)

  }

  // update target module

  targetModule.update(newModule)

  // update nested modules

  if (newModule.modules) {

    for (const key in newModule.modules) {

      if (!targetModule.getChild(key)) {

        if (process.env.NODE_ENV !== 'production') {

          console.warn(

            `[vuex] trying to add a new module '${key}' on hot reloading, ` +

            'manual reload is needed'

          )

        }

        return

      }

      update(

        path.concat(key),

        targetModule.getChild(key),

        newModule.modules[key]

      )

    }

  }

}

解析：

主要功能是将所有模块合并起来，以及注册和注销所有模块。
register就是将我们自己定义的对象模块new Module(自己定义的对象模块)，这个注册可以递归地注册所有模块，包括嵌套的
unregister是module.js文件中的delete this._children[key]是直接调用delete删除
this.root就是最外层的modules

巴特西

VueX源码分析（4）

VueX源码分析(4)

/module/module.js

/module/module-collection.js

最新文章

热门文章