从 main.js 访问 Vue.js 插件

Question

我正在创建一个插件，我只是想知道为什么我无法在main.js 文件中访问它。以下是Auth.js 的样子：

const Auth = {
    install(Vue) {

        Vue.prototype.$isGuest = function () {
            console.log('This user is a guest.');
        }

        Vue.prototype.$getAuthToken = function () {
            console.log('Auth token will be returned.');
        }

    }
}

export default Auth

这是 main.js：

import Auth from '@/helper/Auth'
Vue.use(Auth)

但是，当我执行console.log(this.$isGuest()) 时，它不起作用。它实际上返回以下内容：

main.js?1c90:25 Uncaught TypeError: this.$isGuest is not a function

问题是，当我在 Dashboard.vue 之类的组件中调用它时，此方法有效。

我有办法避免在main.js 中调用isGuest 方法（我可以在Layout.vue 中调用它），但我更好奇为什么它在main.js 中不起作用。

可能是因为Vue还没有初始化，但是即使我把console.log()放在文件末尾，还是不行。

谢谢， N.

Answer 1

如果您在 Vue 之外调用 this.$isGuest()，您将收到您描述的错误。那是因为this 不是一个 Vue 对象。 this 是什么取决于您如何构建代码，但鉴于您使用的是 import，它可能是模块。

另外，您正在将 $isGuest 添加到 Vue 的 prototype。这意味着该函数仅适用于 Vue 对象的实际实例。这就是它在您的组件中可用的原因。

如果您想在主脚本中使用它，您唯一能够访问它的地方是生命周期处理程序、方法或计算的 Vue 对象内部。例如：

new Vue({
  mounted(){
    console.log(this.$isGuest()) // this should work
  }
})