Une brève analyse du contenu du code source de VueX-js tutoriel-php.cn

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

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]
}

Copier après la connexion

Cas de test pour la fonction de recherche

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

Copier après la connexion

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 !== &#39;object&#39;) {
    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
}

Copier après la connexion

cas de test de deepCopy

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

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

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

    const copy = deepCopy(original)

    expect(copy).toEqual(original)
  })

Copier après la connexion

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), < Le contenu de 🎜> change de manière synchrone en 被循环引用循环引用
doit être un type de référence.
const copy = Array.isArray(obj) ? [] : {}
peut parcourir tous les noms de clés d'objets et de tableaux (seuls les attributs de l'instance sont renvoyés, à l'exclusion de la chaîne de prototypes et du symbole) pour implémenter le clonage récursif.
Object.keys

forEachValue

Cas de test

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

Copier après la connexion

Analyse :

  it(&#39;forEachValue&#39;, () => {
    let number = 1

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

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

Copier après la connexion

Mais le premier paramètre de la fonction de rappel est la valeur et le deuxième paramètre est la valeur clé
fn(value, key)

isObject

Cas de test

export function isObject (obj) {
  return obj !== null && typeof obj === &#39;object&#39;
}

Copier après la connexion

Analyse :

  it(&#39;isObject&#39;, () => {
    expect(isObject(1)).toBe(false)
    expect(isObject(&#39;String&#39;)).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)
  })

Copier après la connexion

isPromise

Cas de test

export function isPromise (val) {
  return val && typeof val.then === &#39;function&#39;
}

Copier après la connexion

Analyse :

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

Copier après la connexion

assert

Cas de test :

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

Copier après la connexion

Analyse :

  it(&#39;assert&#39;, () => {
    expect(assert.bind(null, false, &#39;Hello&#39;)).toThrowError(&#39;[vuex] Hello&#39;)
  })

Copier après la connexion

`index.jsindex.esm.js`

index.js

import { Store, install } from &#39;./store&#39;
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from &#39;./helpers&#39;

export default {
  Store,
  install,
  version: &#39;__VERSION__&#39;,
  mapState,
  mapMutations,
  mapGetters,
  mapActions,
  createNamespacedHelpers
}

Copier après la connexion

index.esm.js

Analyse :

import { Store, install } from &#39;./store&#39;
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from &#39;./helpers&#39;

export default {
  Store,
  install,
  version: &#39;__VERSION__&#39;,
  mapState,
  mapMutations,
  mapGetters,
  mapActions,
  createNamespacedHelpers
}

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

Copier après la connexion

a un mode d'importation de plus que
index.esm.jsindex.js
: Il existe deux façons d'importer
import Vuex, { mapState } from 'index.esm.js'
: Il n'y a qu'une seule façon d'importer
import Vuex from 'index.js'

Analyse :

export default function (Vue) {
  const version = Number(Vue.version.split(&#39;.&#39;)[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 === &#39;function&#39;
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }
}

Copier après la connexion

(attribut de magasin, c'est-à-dire que chaque composant peut l'obtenir)
store
consiste à injecter le magasin enregistré globalement dans le composant actuel, avant de créer le composant
vuexInit
(les options sont ` les nouvelles options de Vue(options),)
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 $storenew Vue({ el: 'app', store, router })store