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之类的组件中调用它时，此方法可以正常工作。

我有办法避免在isGuest内调用main.js方法（我可以在Layout.vue中调用它），但我更好奇为什么它没有？{1}}在main.js工作。

可能因为Vue尚未初始化，但即使我将console.log()行放在文件的末尾，仍然无法正常工作。

谢谢， Ñ

Answer 1

如果您在Vue的之外调用this.$isGuest() ，则会收到您描述的错误。这是因为this 不是 Vue对象。 this取决于您构建代码的方式，但鉴于您使用的是import，它可能就是模块。

另外，您要将$isGuest添加到Vue的原型中。这意味着该函数仅在Vue对象的实际实例上可用。这就是为什么它可以在您的组件中使用。

如果要在主脚本中使用它，那么您将能够访问它的唯一位置是生命周期处理程序，方法或计算中的Vue对象。例如：

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

从main.js访问Vue.js插件

1 个答案: