如何在挂载根 Vue 实例之前获取数据?
How to fetch data before mounting the root Vue instance?
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 页面。
我的问题主要是 vue-devtools,似乎如果根 Vue 实例未在页面加载时挂载,我无法从 vue-devtools 检查组件,但 vuex 和事件检查有效。另外,chrome 上的扩展程序图标变灰了 ("Vue.js not detected"),但它可以正常工作。
我是不是做错了什么?还是开发工具有问题?
你做的很好。 Vue 开发工具的右上角有一个刷新按钮。单击它,应该会检测到您的异步加载的 Vue 实例。
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 页面。
我的问题主要是 vue-devtools,似乎如果根 Vue 实例未在页面加载时挂载,我无法从 vue-devtools 检查组件,但 vuex 和事件检查有效。另外,chrome 上的扩展程序图标变灰了 ("Vue.js not detected"),但它可以正常工作。
我是不是做错了什么?还是开发工具有问题?
你做的很好。 Vue 开发工具的右上角有一个刷新按钮。单击它,应该会检测到您的异步加载的 Vue 实例。