javascript - 如何从另一个插件访问一个 Vue 插件(使用 Vue.prototype)？

Question

我正在尝试编写一个 Vue 插件，它是一个简单的抽象来管理我的应用程序中的身份验证状态。这将需要访问其他 Vue 插件，即 vuex , vue-router和 vue-apollo (眼下)。

我尝试扩展 Vue.prototype但是当我尝试访问插件的属性时，我通常会这样做 - 例如。 this.$apollo - 我得到了对象的范围，因此得到了 undefined错误。我还尝试添加 vm = this并使用 vm.$apollo , 但这只会将范围进一步扩大，但不会扩大到 Vue对象 - 我猜这是因为还没有 Vue 对象的实例？

export const VueAuth = {
  install (Vue, _opts) {
    Vue.prototype.$auth = {
      test () {
        console.log(this.$apollo)
      }
    }
  }
}

(其他插件是通过 Vue.use() 在主 app.js 中导入和添加的)

或者，我尝试...

// ...
  install (Vue, { router, store, apollo })
// ...

但作为 js 的新手，我不确定它在传递传递对象的副本方面是如何工作的，或者它是否会改变原件/通过 ref 传递。如果我的插件要进一步接触更多的插件，它也非常明确并且意味着更多的开销。

任何人都可以建议一种干净，可管理的方式来做到这一点吗？我是否必须改为更改 Vue 的实例？而不是原型(prototype)？

Answer 1

在插件安装功能中，您无法访问 Vue 实例 ( this )，但您可以通过原型(prototype)访问其他插件。例如:
主.js:

Vue.use(Apollo)
Vue.use(VueAuth) // must be installed after vue-apollo

插件.js:

export const VueAuth = {
  install (Vue) {
    Vue.prototype.$auth = {
      test () {
        console.log(Vue.prototype.$apollo)
      }
    }
  }
}