首页 文章

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

提问于
浏览
0

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应用程序挂载 .

所以这很好,在加载时,应用程序检查用户是否已登录,一旦完成,它会根据需要重定向到auth pag .

我的问题主要是使用vue-devtools,似乎如果根Vue实例未在页面加载时挂载,我无法检查vue-devtools中的组件,但vuex&events检查有效 . 此外,chrome上的扩展图标显示为灰色(“未检测到Vue.js”),但它有点有效 .

难道我做错了什么?或者它是devtools的问题?

1 回答

  • 2

    你做的很好 . Vue dev工具的右上角有一个刷新按钮 . 单击它,应检测到异步加载的Vue实例 .

相关问题