0

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

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I know what state means and it's insulting to just c/p the definition but it's okay. Yes, obviously I thought about using state as...a state but I want minimal code/logic working with vue since I'm using full Vue stack and the state of my app is handled by my store as stated in my question. Also you may have misread my question, I don't need to know where the user is, just how far he went and in what direction. Next time take more time to ask yourself "did I really understand the question", "what are the implications of the question", "can I answer it". Thank you.
I didn't misread the question, and there was no intent to insult. This seems more of a conceptual problem you're facing, and since your question was "how would you do it?" I thought I'd give an overview of how you should think of "state". When you call history.pushState() or history.replaceState(), you should be passing an object that either references, or completely substitutes the state in your store, so that synchronizing is merely a lookup, rather than some sort of calculation based on "how far in what direction". Stateful applications should not care about the concept of "time".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.