Vuex@3.6.2 源码解读(上篇：内部函数)

2024-01-05 21:46:47

Vuex 库简介

深入了解 Vuex 的内部机制

Vuex 是专为 Vue.js 应用程序设计的强大利器，它集中存储应用程序的状态，提供了一个共享状态的中央位置。让我们深入探索 Vuex 的内部运作，了解它如何简化组件通信和数据管理。

applyMixin 函数：向组件注入 Store

applyMixin 函数就像一座桥梁，它将 Vuex store 注入 Vue 根实例，使组件能够轻松访问 store 中的状态。它检查组件选项中是否存在 store 属性，如果有，它将 store 赋值给组件的 store 属性。如果没有，它会查找父组件的 store，如果存在，它会将其赋值给当前组件的 $store 属性。

export function applyMixin(Vue) {
  Vue.mixin({
    beforeCreate: vuexInit,
  });
}

function vuexInit() {
  const options = this.$options;
  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;
  }
}

forEachValue 函数：遍历并处理对象或数组

forEachValue 函数是一个多面手，它能够遍历对象或数组，并对每个值执行特定的回调函数。这使得对数据进行循环处理变得轻而易举，从而可以执行各种操作，例如更新、过滤或转换。

export function forEachValue(obj, fn) {
  if (obj !== null && typeof obj === 'object') {
    Object.keys(obj).forEach((key) => {
      fn(obj[key], key);
    });
  }
}