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

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 !== &#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
}

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), < Le contenu de 🎜> change de manière synchrone en 被循环引用循环引用

, donc
• doit être un type de référence.

  const copy = Array.isArray(obj) ? [] : {}

Enfin
• 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

Il y a deux sorties, l'une est de type basique et l'autre est une référence circulaire.

forEachValue

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

Une fonction qui traverse les objets (prend en charge les objets et les tableaux)
• 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 === '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)
  })

Jugement Qu'il s'agisse d'un objet ou non, il n'y a pas de jugement ici quant à savoir s'il s'agit d'un objet natif, et des tableaux sont également transmis.
Parce que typeof null === 'object' doit d'abord déterminer s'il est nul

isPromise

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

Déterminer s'il s'agit d'une promesse
Déterminez d'abord si val n'est pas défini, puis vous pouvez juger val.then pour éviter de signaler des erreurs
La base du jugement est de savoir si val.then est une fonction

assert

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')
  })

Fonction d'assertion, affirmer l'échec de l'émission d'un message d'erreur personnalisé Erreur

et

index.jsindex.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

Analyse :

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
}

La différence est que
• 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'

mixin.js

Analyse :

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

Pourquoi chaque composant a-t-il
• (attribut de magasin, c'est-à-dire que chaque composant peut l'obtenir)

  store

Vue2 Utilisez directement la fonction mixin et hook avantCreate, et Vue1 réécrit la fonction Vue._init en mode apparence (décorateur).
• 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

  
  

相关推荐：

谈谈我对vuex的理解

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!