Vuex and Vue-router: changing page and state at the same time

1
votes

I am developing a single-page application using Vuex and Vue-router.

I currently have a store consisting of a large object - say X - loaded from a database with an identifier. I use the Vue-router to navigate between the pages of the SPA.

Once in a while the user may wish to load another version of X from the database. When doing this, I also want to navigate the user to the "start page". Both the "start page" and the page the user is currently on will display a lot of information taken from the store via computed properties.

As I see there are two ways I can handle this, but none of them are good:

  1. I load the new object into the store and then push the router.
    • Issue: When I have loaded the object into the store from the backend all the reactiveness starts to happen and the current page the user is on will read the new information and act weird.
  2. I push the router first and then update.
    • Issue: This is kind of the reverse of the above. The start page will now contain all information of the old version of X and only after a while update to the new version.

For both 1 and 2 I end up with an amount of errors in the front-end/console from e.g. validation of uniqueness.

One solution could be to first navigate the user to a "loading page", then load the new object and then push the router.

To me this seems like a very basic Vue question and I am probably missing some best practice.

1
vue.jsvuejs2vuexvue-router

1 Answers

1
votes

Option #2 is the preferred way (IMHO)

The way to deal with it is to prevent old data from displaying (making the route conditionally a loading page). This can be easily achieved by comparing the stored key to the route key. If you're using vuex-router-sync, you can have this information available from a vuex getter.

The problem I see with option #1 is that the response is not immediate, you would still need to show that the data is loading, and then prevent any other action before pushing the new route. This is not a common experience from the UX perspective (consider clicking on a link, you don't expect the redirect to take after 5s and then present a fully loaded page). Additionally, you still need to disable the UI while the load is taking place, or preferrably be able to interrupt the loading procedure, to prevent the route from executing if the user executes another route while the data is loading.