页面重新加载后，在创建/挂载的钩子中未定义导入的 vue 实例

Question

我正在尝试在 Vue 中构建一个功能，该功能将在用户重新加载页面后执行自动登录。我正在将 vue 实例导入发送 HTTP 请求的模块。我正在将该模块导入到应用程序的主要组件中，我试图从创建/安装的钩子中调用它。但是登录模块在导入的 vue 实例“TypeError: Cannot read property '$http' of undefined”方面抛出了一个错误，实际上 vue 似乎在这一点上是未定义的。我做错了什么？

登录功能在被调用时完美运行，例如从一个按钮。如果在将任何更改保存到代码后由开发服务器刷新页面，则安装/创建的自动登录也有效（！）。它只是在浏览器触发的重新加载后不起作用。

// main.js - entry point
export const vue = new Vue({ 
    el: '#app',
    router,
    store,
    render: h => h(App)
});

// App.vue - main app component
<script>
    import { login } from './controllers/loginController';
    export default {
        created: function () { //tried mounted as well
        login('dummy@dummy.com', 'dummy', 2);
        }
    };
</script>

// loginController.js
import { vue } from '../main';
export const login = function (email, password, reportID = null) {
    vue.$http
        .post('login/', { email: email, password: password, reportID: reportID })
        .then(...)
};

Answer 1

怎么了？

您在loginController.js 上导入Vue，因此现在引擎将转到特定路径并编译该文件，然后才移至下一条指令...因此在编译文件main.js 时，它将到达您的创建函数并在其中找到login函数调用...登录功能已定义，但其中的vue仍在编译中...所以它仍然是undefined

我该如何解决这个问题？

我建议在你的 vue 实例中使用login，因为它是正确的方法：

//App.vue

created() {
function login(email, password, reportID = null) {
    this.$http
        .post('login/', { email: email, password: password, reportID: reportID })
        .then(() =>{...})
    login('dummy@dummy.com', 'dummy', 2);
}