CODEWITHSUNDEEP
javascriptvuejs2vue-routerhtml5-history
rmNyro
rmNyro

Reputation: 381

Working with html5 history API and Vue

I'm facing a stupid problem. In a web app (my stack is vue + vuex + vue-router) I'm totally unable to synchronize my store state with the page the user is viewing.

When a user triggers the back or forward button, it triggers the same onpopstate event that gives absolutely no information about "direction" or the number of page. Only the array key in the state object seem to be barely workable (saving it when going to new places and then guessing where the user went onpopstate) but I don't even know where the "door" corresponding for "the key".

So from there I thought about manually tracking the history state key and guessing where the user has been but I guess it wouldn't be cross-compatible, and also it's heavy code to lift.

Here is my question: Am I missing some key element in the html5 API, how could I do (and keep code/logic minimalist)?

Thank you in advance!

EDIT: renamed the title and added info

EDIT2: vuex-router-sync is inappropriate since it only provides route info on vuex side and does not really sync router state and store state...to bad

P.S.: please don't c/p definitions, read carefully, think

Upvotes: 0

Views: 1363

Answers (1)

Patrick Roberts
Patrick Roberts

Reputation: 51756

onpopstate provides the state object in event.state correlating to the respective place in history of your application.

Write your application so that providing this state object encompasses the entire state of your application, regardless of time. I recommend you read about State pattern, and understand what "state" means, e.g.

the particular condition that someone or something is in at a specific time.

The implication I'm making is that you should not need to know the relative location in history your application is in, because event.state should be all your application needs in order to determine what to render.

Upvotes: 1

Related Questions