如何在挂载根Vue实例之前获取数据？

Question

TL;DR:，在启动应用程序之前，做异步操作的好方法是什么？Vue -如果我在创建/挂载root Vue实例之前等待异步操作完成，那么devtools就不能正常工作。

我是Vue.js的新手，我正在开发一个后台办公应用程序，除非用户登录，否则任何东西都无法访问。当然，除了登录/注册页面之外。

所以在页面加载时，我会做这样的事情：

// Set up store and router ...

router.beforeEach(function (to, from, next) { 
    /* redirect to auth if store.state.auth.isLogged is false */ 
}

// Dispatch an action that send a request to the API to get the connected user 
// (or null if the user is not logged) 
store.dispatch('getAuth').then(user) {
    // Mount the app one the request is done and the mutation for isLogged is done
    new Vue({
        el: '#app', 
        router,
        store,
        // ...
    });
}

在我的index.html中，我有一个纯HTML/CSS加载页面，等待vue应用程序挂载。

所以这很好，在加载时，应用程序检查用户是否被记录，一旦完成，它将重定向到auth (如果需要的话)。

我的问题主要是vue-devtools，如果根Vue实例没有安装在页面加载上，我就无法检查来自vue-devtools的组件，但是vuex & events检查可以工作。此外，chrome上的扩展图标是灰色的(“未检测到Vue.js”)，而它是一种工作。

我做错了什么吗？还是德沃尔家族出了问题？

Answer 1

你所做的一切都很好。Vue dev tools的右上角有一个刷新按钮。单击它，将检测到异步加载的Vue实例。