浅析VueX的源码内容

文件架构如下

util.js

先从最简单的工具函数开始。

find函数

/**
 * Get the first item that pass the test
 * by second argument function
 *
 * @param {Array} list
 * @param {Function} f
 * @return {*}
 */
export function find (list, f) {
 return list.filter(f)[0]
}

find函数的测试用例

it('find', () => {
 const list = [33, 22, 112, 222, 43]
 expect(find(list, function (a) { return a % 2 === 0 })).toEqual(22)
})

解析：

deepCopy函数

/**
 * Deep copy the given object considering circular structure.
 * This function caches all nested objects and its copies.
 * If it detects circular structure, use cached copy to avoid infinite loop.
 *
 * @param {*} obj
 * @param {Array<Object>} cache
 * @return {*}
 */
export function deepCopy (obj, cache = []) {
 // just return if obj is immutable value
 if (obj === null || typeof obj !== 'object') {
 return obj
 }

 // if obj is hit, it is in circular structure
 const hit = find(cache, c => c.original === obj)
 if (hit) {
 return hit.copy
 }

 const copy = Array.isArray(obj) ? [] : {}
 // put the copy into cache at first
 // because we want to refer it in recursive deepCopy
 cache.push({
 original: obj,
 copy
 })

 Object.keys(obj).forEach(key => {
 copy[key] = deepCopy(obj[key], cache)
 })

 return copy
}

deepCopy的测试用例

 // 普通结构
 it('deepCopy: nornal structure', () => {
 const original = {
 a: 1,
 b: 'string',
 c: true,
 d: null,
 e: undefined
 }
 const copy = deepCopy(original)

 expect(copy).toEqual(original)
 })
 
 // 嵌套结构
 it('deepCopy: nested structure', () => {
 const original = {
 a: {
 b: 1,
 c: [2, 3, {
 d: 4
 }]
 }
 }
 const copy = deepCopy(original)

 expect(copy).toEqual(original)
 })
 
 // 循环引用结构
 it('deepCopy: circular structure', () => {
 const original = {
 a: 1
 }
 original.circular = original

 const copy = deepCopy(original)

 expect(copy).toEqual(original)
 })

解析：

forEachValue

/**
 * forEach for object
 */
export function forEachValue (obj, fn) {
 Object.keys(obj).forEach(key => fn(obj[key], key))
}

测试用例

 it('forEachValue', () => {
 let number = 1

 function plus (value, key) {
 number += value
 }
 const origin = {
 a: 1,
 b: 3
 }

 forEachValue(origin, plus)
 expect(number).toEqual(5)
 })

解析：

isObject

export function isObject (obj) {
 return obj !== null && typeof obj === 'object'
}

测试用例

 it('isObject', () => {
 expect(isObject(1)).toBe(false)
 expect(isObject('String')).toBe(false)
 expect(isObject(undefined)).toBe(false)
 expect(isObject({})).toBe(true)
 expect(isObject(null)).toBe(false)
 expect(isObject([])).toBe(true)
 expect(isObject(new Function())).toBe(false)
 })

解析：

isPromise

export function isPromise (val) {
 return val && typeof val.then === 'function'
}

测试用例

 it('isPromise', () => {
 const promise = new Promise(() => {}, () => {})
 expect(isPromise(1)).toBe(false)
 expect(isPromise(promise)).toBe(true)
 expect(isPromise(new Function())).toBe(false)
 })

解析：

assert

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

测试用例：

 it('assert', () => {
 expect(assert.bind(null, false, 'Hello')).toThrowError('[vuex] Hello')
 })

解析：

index.js和index.esm.js

index.js

import { Store, install } from './store'
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from './helpers'

export default {
 Store,
 install,
 version: '__VERSION__',
 mapState,
 mapMutations,
 mapGetters,
 mapActions,
 createNamespacedHelpers
}

index.esm.js

import { Store, install } from './store'
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from './helpers'

export default {
 Store,
 install,
 version: '__VERSION__',
 mapState,
 mapMutations,
 mapGetters,
 mapActions,
 createNamespacedHelpers
}

export {
 Store,
 install,
 mapState,
 mapMutations,
 mapGetters,
 mapActions,
 createNamespacedHelpers
}

解析：

mixin.js

export default function (Vue) {
 const version = Number(Vue.version.split('.')[0])

 if (version >= 2) {
 Vue.mixin({ 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)
 }
 }

 /**
 * Vuex init hook, injected into each instances init hooks list.
 */

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

解析：

相关推荐：

谈谈我对vuex的理解

Vue.js之vuex(状态管理)