Wie man Daten von der API in vuex richtig holt?

Question

Ich arbeite an meiner Vue.js-Anwendung und habe Probleme beim Abrufen von Daten über die API mit vuex-router-sync.

Wie ich in jedem Tutorial oder Beispiel sah, ist es üblich, die Store-Aktion auf created Komponente Hook zu versenden. In meinem Fall scheint es keine Option zu sein und hier ist warum:

Ich verwende den Standard-Vue-Router für mein Routing, und wenn ich zwischen den Seiten navigieren, sollte nicht nur mein Inhalt ändern, sondern auch meine Sidebar und Header . So implementiert ich den Namen Router-View-Konzept, wie

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

Aber das Spiel, GameHeader und GameSidebar sollten den gleichen Getter für das aktuell ausgewählte Spiel teilen. Es ist unmöglich zu entscheiden, welche dieser Komponenten die Aktion zum Abrufen der Daten ausführen soll.

Ich habe versucht, auf den Router selbst, auf beforeEnter, Haken, aber das Problem konfrontiert, dass (/game/1-/game/2 in meinem Fall) löst nicht die beforeEnter zwischen denselben Routen zu navigieren.

Gibt es eine Möglichkeit, dass ich an jede Route Navigation haken kann? Oder vielleicht ein besseres Muster für das Abrufen von Abrufaktionen?

Vielen Dank im Voraus!

Answer 1

Es gibt viele Möglichkeiten, dies zu tun. Zum Beispiel könnten Sie Daten innerhalb einer Komponente abrufen, die durch eine Routenänderung geladen wird, und nach dem Setzen von Daten auf vuex, indem eine Änderung gesendet wird. Das macht den Job perfekt. Bedenken Sie auch, dass es nur wenige Möglichkeiten gibt, Daten innerhalb einer Komponente abzurufen - Sie können diese in jedem der Lebenszyklus-Hooks von Vue einbinden. Schauen Sie mal hier https://router.vuejs.org/en/advanced/data-fetching.html

Auch manchmal benötigen Sie einige Daten vor jeder Routenänderung und hier können Sie den gleichen Ansatz verwenden - stellen Sie eine Anfrage, wenn Vue App geladen ist.