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

【问题标题】：How to fetch data before mounting the root Vue instance?如何在挂载根 Vue 实例之前获取数据？
【发布时间】：2017-07-19 12:25:07
【问题描述】：

TL;DR：在启动应用程序之前做异步操作的好方法是什么？如果我在创建/挂载根 Vue 实例之前等待异步内容完成，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 应用程序挂载。

所以这工作正常，在加载时，应用程序会检查用户是否已登录，一旦完成，它会在需要时重定向到身份验证页面。

我的问题主要出在 vue-devtools 上，似乎如果根 Vue 实例未安装在页面加载时，我无法从 vue-devtools 检查组件，但 vuex 和事件检查工作。此外，chrome 上的扩展图标显示为灰色（“未检测到 Vue.js”），但它可以正常工作。

我做错了吗？还是开发工具有问题？

【问题讨论】：

标签： vue.js vue-router vuex

【解决方案1】：

你正在做的很好。 Vue 开发工具的右上角有一个刷新按钮。点击它，你的异步加载的 Vue 实例应该会被检测到。

【讨论】：