vuex 设计思路和实现

爱被打了一巴掌 2023-02-22 08:23 9阅读 0赞

> API概念的东西就不介绍了, 如果还不了解`vuex` 的应用, 可以去查看[官方vuex文档][vuex] 。下面着重讲解 `vuex`的原理以及实现

#### vuex 设计思路 ####

`vuex`是使用插件机制开发的, `vuex` 中的 `store` 本质就是`没有template`的隐藏着的`vue实例`

在`beforeCreate` 混入`vuexInit` ,`vuexInit`方法实现了`store`注入`vue`组件实例，并注册了`vuex store`的引用属性·`$store`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]  
vuex 设计思路源码

// vuex插件公开的install方法
      function install (_Vue) { 
        if (Vue && _Vue === Vue) { 
          { 
            console.error(
              '[vuex] already installed. Vue.use(Vuex) should be called only once.'
            );
          }
          return
        }
        Vue = _Vue;
        applyMixin(Vue);
      }
      /* ... */
       var index_cjs = { 
        Store: Store,
        install: install, // 开放出去install方法, 直接在项目中使用这个插件
        version: '3.4.0',
        mapState: mapState,
        mapMutations: mapMutations,
        mapGetters: mapGetters,
        mapActions: mapActions,
        createNamespacedHelpers: createNamespacedHelpers
      };
    
      return index_cjs;

// 混入到项目中
    function applyMixin (Vue) { 
       var version = Number(Vue.version.split('.')[0]);
    
       if (version >= 2) { 
         Vue.mixin({  beforeCreate: vuexInit }); // 在生命周期beforeCreate创建全局混入函数
       } else { 
         // 覆盖初始化并注入vuex初始化过程
    	// 1.x 以上版本兼容。
         var _init = Vue.prototype._init;
         Vue.prototype._init = function (options) { 
           if ( options === void 0 ) options = { };
    
           options.init = options.init
             ? [vuexInit].concat(options.init)
             : vuexInit;
           _init.call(this, options);
         };
       }
    
       function vuexInit () {  // Vuex 初始化钩子，注入到每个实例初始化钩子列表中
    	   var 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;
    	   }
    	}
    }
    
    
    // 使用Vue实例来存储状态树
    // 隐藏警告，以防用户添加了, 一些优先的 global mixins
    function resetStoreVM (store, state, hot) { 
      /* other... */
      var silent = Vue.config.silent;
      Vue.config.silent = true;
      store._vm = new Vue({  // 创建一个vue 实例
        data: { 
          $$state: state
        },
        computed: computed
      });
      Vue.config.silent = silent;
    /* other... */
    }

#### vue 响应式设计，依赖监听、依赖收集 ####

想深刻理解 `vuex` 的设计思路。要明白 vue 对象数据 `Object.defineProperty` ,`getter/setter` 方法的代理劫持的原理

// src/core/instance/state.js
    // 初始化组件的state
    export function initState (vm: Component) { 
      vm._watchers = []
      const opts = vm.$options
      if (opts.props) initProps(vm, opts.props)
      if (opts.methods) initMethods(vm, opts.methods)
      // 当组件存在data属性
      if (opts.data) { 
        initData(vm)
      } else { 
        observe(vm._data = { }, true /* asRootData */)
      }
      // 当组件存在 computed属性
      if (opts.computed) initComputed(vm, opts.computed)
      if (opts.watch && opts.watch !== nativeWatch) { 
        initWatch(vm, opts.watch)
      }
    }

vuex 就是实现了带有计算属性的 data 数据, 原理和 `initComputed`、 `initData` 是一致的

如果上面已经完全理解,想更深度了解响应式依赖 [继续阅读vue的computed、vm.$data原理][vue_computed_vm._data]

[vuex]: https://vuex.vuejs.org/zh/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200702175410847.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz,size_16,color_FFFFFF,t_70#pic_center
[vue_computed_vm._data]: https://blog.csdn.net/qq_39043923/article/details/107173683