vue3源码分析之use(store)

vue3源码分析之use(store)

官方介绍use()

用来安装 Vue.js 插件。如果插件是一个对象，则它必须暴露一个 install 方法。如果插件本身是一个函数，则它将被视为 install 方法。

该 install 方法将以应用实例作为第一个参数被调用。传给 use 的其他 options 参数将作为后续参数传入该安装方法。

当在同一个插件上多次调用此方法时，该插件将仅安装一次。

use()相关源码

use(plugin, ...options) {
     // 是否已安装此插件
     if (installedPlugins.has(plugin)) {
         warn(`Plugin has already been applied to target app.`);
     }
     // 判断此插件的install属性是否为方法
     else if (plugin && shared.isFunction(plugin.install)) {
         // 安装此插件
         installedPlugins.add(plugin);
         plugin.install(app, ...options);
     }
     // 判断此插件是否为方法
     else if (shared.isFunction(plugin)) {
         // 安装此插件
         installedPlugins.add(plugin);
         plugin(app, ...options);
     }
    else {
        warn(`A plugin must either be a function or an object with an "install" ` +
            `function.`);
    }
    return app;
}

vuex相关源码

// 一般在main.js中调用app.use(store)方法是就好调用store的install方法
Store.prototype.install = function install (app, injectKey) {
  // 将当前store对象通过provide和key保存
  app.provide(injectKey || storeKey, this);
  // 将当前store对象设置为vue应用的全局属性
  app.config.globalProperties.$store = this;

  var useDevtools = this._devtools !== undefined
    ? this._devtools
    : false;

  if (useDevtools) {
    addDevtools(app, this);
  }
};

就是因为有下面这行代码，我们才可以vue组件中使用$store

app.config.globalProperties.$store = this;

当然这样只是可以通过this.$store，如果在setup组合api中就不能这样用了

还好vuex给我们提供了另一个便利的方法：useStore

useStore源码分析

useStore源码相对就比较简单了

function useStore (key) {
  if ( key === void 0 ) key = null;

  // 直接通过key获取通过provide保存的store对象
  return inject(key !== null ? key : storeKey)
}

如果通过use(store)安装组件的时候没有设置key，那么使用useStore()的时候也不用传任何参数

如果通过use(store, {injectKey: 'my_key'})安装组件的时候设置了key，那么使用useStore(‘my_key’)的时候也要设置injectKey