Maison >interface Web >js tutoriel >Une brève analyse du contenu du code source de VueX
Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Pour les applications d'une seule page comportant de nombreux composants et des interactions complexes, Vuex fournit une méthode de gestion d'état pratique, précise et prévisible pour faciliter le partage et la modification des données entre les composants.
La structure du fichier est la suivante
/module
/plugins
helpers.js
index.esm.js
index.js
store.js
util.js
Commencez avec la fonction utilitaire la plus simple .
fonction de recherche
/** * 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] }
Cas de test pour la fonction de recherche
it('find', () => { const list = [33, 22, 112, 222, 43] expect(find(list, function (a) { return a % 2 === 0 })).toEqual(22) })
Analyse :
Filtrez d'abord 断言函数f
avec 列表list
, et enfin prenez le premier élément de la liste filtrée.
Fonction 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 }
cas de test de 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) })
Analyse :
Fonction : fonction de clonage profond qui prend en charge les références circulaires
Le premier jugement if obj === null || typeof obj !== 'object'
juge que s'il ne s'agit pas d'un type référence, il renvoie directement (le jugement de base type est une copie de valeur), c'est aussi un exutoire de récursion.
Le deuxième jugement hit
est de juger s'il s'agit d'une référence circulaire, puisqu'il s'agit d'une référence circulaire, il devrait y avoir une copie en cache dans le cache. cache directement. Évitez de faire à nouveau des copies en double.
Qu'est-ce qu'une référence circulaire ? Voir le troisième cas de test original.circular = original
La référence circulaire et le contenu référencé sont les mêmes. La mise en cache est utilisée pour éviter le clonage répété (le même contenu).
original.circular
est une référence circulaire, et original
est une référence circulaire
mettez d'abord cope
dans cache
. , c'est dans Lors de la récursion, si vous rencontrez une référence circulaire, assurez-vous qu'il y a une copie de 被循环引用的copy
dans le cache, mais copy
doit être un type référence.
Pourquoi cope
doit-il être un type référence ? 循环引用
enregistre la référence et non le contenu (la copie n'est pas terminée pour le moment). La copie n'est pas terminée lors de la récursion. La copie n'est terminée qu'une fois la récursion terminée. changements dans le futur (la copie est terminée), change de manière synchrone en 被循环引用
循环引用
const copy = Array.isArray(obj) ? [] : {}
Object.keys
Cas de test
/** * forEach for object */ export function forEachValue (obj, fn) { Object.keys(obj).forEach(key => fn(obj[key], key)) }Analyse :
it('forEachValue', () => { let number = 1 function plus (value, key) { number += value } const origin = { a: 1, b: 3 } forEachValue(origin, plus) expect(number).toEqual(5) })
fn(value, key)
Cas de test
export function isObject (obj) { return obj !== null && typeof obj === 'object' }Analyse :
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) })
Cas de test
export function isPromise (val) { return val && typeof val.then === 'function' }Analyse :
it('isPromise', () => { const promise = new Promise(() => {}, () => {}) expect(isPromise(1)).toBe(false) expect(isPromise(promise)).toBe(true) expect(isPromise(new Function())).toBe(false) })
Cas de test :
export function assert (condition, msg) { if (!condition) throw new Error(`[vuex] ${msg}`) }Analyse :
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 }
index.esm.js
index.js
import Vuex, { mapState } from 'index.esm.js'
import Vuex from 'index.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 } } }
store
vuexInit
les options ont un magasin
Puisque beforeCreate
est le crochet de cycle de Vue
et this
pointe vers l'instance de composant actuelle, this.$store
peut directement injecter le magasin dans le composant actuel
Tous les composants héritent d'une Vue globale, le crochet de cycle de composant global mixin beforeCreate
, de sorte que chaque composant puisse être automatiquement injecté dans le magasin, c'est-à-dire que chaque composant peut obtenir la Vue globale directement via $store
new Vue({ el: 'app', store, router })
store
相关推荐:
Vuex de Vue.js (gestion de l'état)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!