CODEWITHSUNDEEP
vue.jsvuejs2vue-router
Maciej Kwas
Maciej Kwas

Reputation: 6459

cache view in vue.js

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.

Upvotes: 1

Views: 1824

Answers (1)

Daniel
Daniel

Reputation: 35734

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

Upvotes: 1

Related Questions