vuexでAPIからデータを正しく取得する方法は？

Question

私は自分のVue.jsアプリケーションで作業しており、vuex-router-syncでAPI経由でデータを取得するのに問題があります。

すべてのチュートリアルやサンプルで見たように、createdコンポーネントフックにストアアクションをディスパッチするのが一般的です。私の場合はオプションではないようです。理由は次のとおりです。

ルーティングに標準のvue-routerを使用しています。ページ間を移動するときにコンテンツが変更されるだけでなく、サイドバーとヘッダー。したがって、私は、このような

routes: [{ 
     path: '/', 
     components: { 
     page: Home, 
     sidebar: GeneralSidebar, 
     header: HomeHeader 
     } 
    }, { 
     path: '/game/:id', 
     name: 'game', 
     components: { 
     page: Game, 
     sidebar: GameSidebar, 
     header: GameHeader 
     } 
    }] 

として、名前のルータビューの概念を実装しかしゲームは、GameHeaderとGameSidebarは、現在選択されているゲームのために同じゲッターを共有する必要があります。これらのコンポーネントのどれをデータを取得するためのアクションをディスパッチする必要があるかは、判断することは不可能です。

私はbeforeEnterに、ルータ自体にフックしようとしましたが、（/game/1から/game/2に私の場合には）同じルート間を移動するbeforeEnterをトリガしていないこと、問題に直面しました。

フックできる方法はありますかルートナビゲーションはありますか？フェッチアクションをディスパッチするためのより良いパターンですか？

ありがとうございます！

Answer 1

これを実行する方法はたくさんあります。たとえば、ルート変更によってロードされ、変更をディスパッチすることによってvuexにデータを設定した後に、一部のコンポーネント内のデータをフェッチすることができます。これは完璧な仕事です。また、任意のコンポーネント内でデータをフェッチする方法はほとんどありません.Vueのライフサイクルフックのいずれかにフックすることができます。ここをクリックしてくださいhttps://router.vuejs.org/en/advanced/data-fetching.html

時には、ルート変更の前払いのデータが必要です。同じアプローチを使用することもできます.Vueアプリケーションがロードされているときにリクエストしてください。