Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cache vuex store #415

Merged
merged 12 commits into from
Jul 14, 2021
Merged

Cache vuex store #415

merged 12 commits into from
Jul 14, 2021

Conversation

robbevp
Copy link
Member

@robbevp robbevp commented Jan 19, 2021

Description

Fix #39
This uses the same idea as #48 but with a few differences.

Different caches

We store data in two places: localStorage and localForage. localStorage is prefered since it is synchronous, so it is used for most modules. This way we have instant access to data from those modules

The main collections that are to big to be stored inside localStorage and are stored in localForage.
I've added a subclass to VuexPersistence that allows us to save and restore data in a memory safe way. (VuexPersist would try and merge the existing store with the savedStore, which would cause huge spikes in memory usage), we can now use the mutations within each module.

Router isn't blocked

I've placed the await store.restored before we would commit something in any of the modules that are stored async. Since we overwrite the way this value is set, we have a separate restored for each module that is stored async.

This way we can already render the page while data is loaded from localForage. A user might experience a 2-3 sec delay before the page is populated with data, but that feels very acceptable.

Filter mutations

Just as in #414. We only set a cache when something inside of the modules in the cache is changed.
This makes that commits in the player don't have any effect on the cache.

Debounced saveState

The methods that are stored in localForage have their saveState wrapped in a debounce with a wait time of a minute.
If a user is editing, loading data, it doesn't make much sense to save the state after every mutation. Since we don't use these values directly, the user should not notice this.
(There is a slim chance that the user closes the tab before the data was stored, but if that is the case, the user will get the updated data soon after loading the app.)

How Has This Been Tested?

Tested by refreshing quite a bit during the course of a day in both Chrome and FF.

The usual memory usage might spike up to 200MB when restoring or saveing the cache from localForage and settled to around 80MB - 120MB after this.

@robbevp robbevp added the enhancement New feature or request label Jan 19, 2021
@robbevp robbevp added this to the 1.0 milestone Jan 19, 2021
@robbevp robbevp requested a review from chvp January 19, 2021 17:34
@robbevp robbevp self-assigned this Jan 19, 2021
@robbevp
Copy link
Member Author

robbevp commented Jan 19, 2021

I've also created a PR with vuex-persist: championswimmer/vuex-persist#218
With this change we can cache tracks without too much of a performance hit

@robbevp robbevp changed the title Cache most of the vuex store Cache vuex store Jan 21, 2021
@robbevp robbevp force-pushed the enhc/cache-store branch 3 times, most recently from 85c59da to 8ae7983 Compare January 21, 2021 17:07
@robbevp robbevp force-pushed the enhc/cache-store branch from f159bee to 609dfac Compare April 5, 2021 13:28
src/store/albums.js Outdated Show resolved Hide resolved
src/store/persistence.js Outdated Show resolved Hide resolved
src/store/persistence.js Outdated Show resolved Hide resolved
@robbevp robbevp force-pushed the enhc/cache-store branch 2 times, most recently from 0c16e98 to 6a288fd Compare July 11, 2021 09:38
@robbevp robbevp requested a review from chvp July 11, 2021 14:49
Copy link
Member

@chvp chvp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems more correct to me. Feel free to disagree.

src/store/persistence.js Outdated Show resolved Hide resolved
chvp
chvp previously approved these changes Jul 13, 2021
src/store/persistence.js Outdated Show resolved Hide resolved
Copy link
Member

@chvp chvp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, didn't see the merge conflicts before approving.

@robbevp robbevp force-pushed the enhc/cache-store branch from c604037 to b982b59 Compare July 13, 2021 07:29
@robbevp
Copy link
Member Author

robbevp commented Jul 13, 2021

@chvp rebased

@chvp chvp merged commit 5f9c48f into develop Jul 14, 2021
@chvp chvp deleted the enhc/cache-store branch July 14, 2021 09:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cache DB in browser
2 participants