cache view in vue.js

Question

I have started to build apps with vuejs recently and have one small issue that I can't get around:

I am using vue-router to jump between pages and lets say I have a huge list where additional items may be injected with ajax, user has to scroll, he click on item, see the details (is in new route) and when gets back list is reinitialized and has to scroll again to be at the point he was previously. Do I have some possibility to keep the state of given component (and view like scroll position) while using vue-router or do I have to keep some cache-instance in main app component and then map it on init?

Thank you.

Hard to tell what would work since you didn't share your code, but I'd look at the keep-alive component and vue-router's Scroll Behavior options — thanksd
– thanksd, Commented Oct 4, 2017 at 15:29

Daniel · Accepted Answer · 2017-10-04 19:20:32Z

1

Essentially, the issue is that your component stores state internally. Navigating away clears the state. There are two ways I see this could be handled.

1) (quickfix) instead of redirecting use another way of displaying the item details (modal, or expand come to mind). This way the state of the component is not lost

2) (the "proper way") store the state. Inevitably, you'll come up against this sooner or later and the best way to deal with storing a state is vuex. https://vuex.vuejs.org/en/intro.html Initially, this will require a bit of learning and add some complexity, but it is a worthwhile investment

answered Oct 4, 2017 at 19:20

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

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

1 Comment

Maciej Kwas Over a year ago

So I ran thru first option and it seems to work, but is pretty messy, I have attached simple message bus implementation, but anyway ended up with storing data somewhere in the app anyway and had to implement artificial reactivity. Now I'm after vuex documentation and it seems to solve all my issues (except scroll position, but I have solved this other way), just what I needed and is not that scary at all :) Thank you

Collectives™ on Stack Overflow

cache view in vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related