ルートVueインスタンスをマウントする前にデータをフェッチする方法は？

Question

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に私はVUEアプリをマウントするのを待ち、純粋なHTML/CSSの読み込みページを持っています。

これは正常に動作します。読み込み時にユーザーがログに記録されているかどうかを確認し、一度これが完了すると、必要に応じて認証ページにリダイレクトされます。

私の問題は主にvue-devtoolsにあります。ルートVueインスタンスがページロードにマウントされていないと、vue-devtoolsからコンポーネントを検査できませんが、vuex &イベント検査が機能するようです。クロムの拡張子アイコンはグレー表示されています（「Vue.js not detected」）。

何か間違っていますか？それとも、devtoolsの問題ですか？

Answer 1

あなたがしていることは問題ありません。 Vue開発ツールの右上には、更新ボタンがあります。これをクリックすると、非同期にロードされたVueインスタンスが検出されます。