vuex-multi-tab-state and vuex-persistedstate

[AndreiSoroka]

Hi. I simultaneously usage vuex-multi-tab-state and vuex-persistedstate. Both usage localstorage.

Does vuex-multi-tab-state completely replace vuex-persistedstate functionality?

• If yes then I have a problem with https://github.com/gabrielmbmb/vuex-multi-tab-state/issues/30
• If no then I have a problem with duplicate storage

thanks

[wparad]

It's worse than duplicate storage, there is no way to know when the user first opens the site. Arguably the functionality should be:

When the last tab is closed, vuex-multi-tab-state wipes it cache.

From a practical standpoint this would actually mean, setting some sort of initialization flag to populate the state from the vuex store and then using it from that point on, until the vuex store resets itself. Perhaps it is as simple as setting a flag in vuex (making sure it is never persisted) and then checking the flag before loading/overwriting the state. (and then setting the flag)

[AndreiSoroka]

Temporrary, I always remove from localstorage when user is open new tab

window.localStorage.removeItem('vuex-multi-tab');

Each tab register two modules (vuex-multi-tab-state, vuex-persistedstate)

And it is works. (First tab work with recreated vuex-multi-tab)

But I think it is temporrary solve... I'm afraid this "bike" will break...

[wparad]

That's a great first start, but I think you'll also need to handle resuming a sleeping tab as well.

[gabrielmbmb]

Hey, thank you for submitting this issue. I'll put a boolean flag in the plugin initialization indicating whether or not the content in the local storage should be removed after the last tab has been closed. What do you think?

[wparad]

Its the right direction, but the problem is there is no reliable way to know when a tab is closed. For instance if the browser is closed itself or all tabs are put into the background, it would need to be treated the same but no tabs have actually been closed. Maybe more realistic would be an initialize/enable method, or even better an injected computed property that causes the plugin to clone the current store, wipe its cache and start syncing the in memory store.

I think it has to continually check "if enabled" as that state can change even if the tab isn't closed. It's probably sufficient with a method, as long as the value isn't persisted. Though I don't see a straightforward way to do that. So the computed property reactivity check is probably the only way.

[AndreiSoroka]

Yes. Need research first initialization.

How I see:

If I inited plugin with argument: {autoClearCache: true} then:

1. Open new tab
2. Remove cache from localstorage
3. Init vuex
4. Add to localstorage

If I have already opened tab:

1. Listen localstorage (If somebody remove and add localstorage, tab is getting event)
2. If somebody change vuex and localstorage is empty > just create

[KaskoYurii]

I have the same issue: New changes in the store do not appear until I have not reset the all browser cache. If I will clear localStorage on the tab opening, I'm not sure that this solution will work while I just reload my tab. Maybe there is an updated solution?