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&事件检查工作。此外,chrome上的扩展图标显示为灰色(“Vue.js未检测到”),但它有点工作。
我做错了吗?或者它是devtools的问题?
答案 0 :(得分:2)
你做得很好。 Vue dev工具的右上角有一个刷新按钮。单击它,应检测到异步加载的Vue实例。