Drücken wir es mal so aus: ich kenne nun viele Wege wie es nicht funktioniert ;) Ich stehe auf dem Standpunkt das ein Pattern wie Vuex nur dann Sinn macht, wenn man von vorne herein ein Teil der Daten im Hintergrund in der Anwendung hat. Am Beispiel eines Stores wären das zum Beispiel alle Artikel. Im Falle eines Backends die Benutzer, usw. Da Vue aber Reactive ist, bin ich regelmäßig in Zustände geraten, dass die Daten dann eben doch nicht da waren. Manchmal waren sie zu spät da, oder es wurde behauptet sie wären da, der state stand dann aber immer noch auf null. Die Daten on Demand zu laden ist dann auch irgendwie blöd, dann kann man das mit Vuex auch direkt sein lassen.
Alle Versuche liefen über die main.js. Erst einfach so parallel, dann wurden die einzelnen States nacheinander gefüllt. Dann irgendwann das gesamte Vue mit einem Loading-Screen gesperrt, usw. usw. – insbesondere bei einem Reload auf Deeplinks ist Vuex in arge Bedrängnis geraten. Die letztliche Lösung für das Preloading des Stores in Vuex ist ebenso banal wie einfach, und funktioniert insbesondere. Der Trick ist einfach die Navigation Guards des Vue Routers zu verwenden. Hier ein kleiner Beispiel-Code:
router.beforeEach((to, from, next) => {
if (to.name !== 'Login') {
if (Vue._.isEmpty(store.state.dummy)) {
store.dispatch('dummy/REFRESH').then(function (response) {
next()
})
} else {
next()
}
} else {
next()
}
})
Zugegebenermaßen könnte man den Code noch etwas schöner machen, aber er funktioniert erst einmal und die Intention ist erkennbar ;) Bei jedem Routing (außer Login, weil da hat man noch kein Auth für Axios) wird geprüft, ob der State null ist. Ist er das wird ein dispatch ausgelöst und die Daten werden geladen. Dies ist die bisher beste Lösung die ich gefunden habe. Insbesondere funktioniert der Guard so, dass das Template erst dann gerendert wird, wenn der dispatch Erfolg gemeldet hat.
Der Beitrag Preloaden des States für einen Vuex Store erschien zuerst auf Webworking.