gabrielmbmb/vuex-multi-tab-state

💾🔗🖥️ Share, synchronize and persist state between multiple tabs with this plugin for Vuex. TypeScript types included.

Hi everyone! 👋

A quick introduction about me

Hi, I'm Gabriel a Machine Learning Engineer who loves programming and making open source projects (🧙‍♂️ open sourcerer).

I'm mainly interested in Software Engineering, Machine Learning 🧠, MLOps, Microservices and DevOps 👷, so you will find me in my spare time developing or contributing to things related to these fields. From time to time, I also like to write frontend code.

Contact with me

How can you get in touch with me

These are the channels you can use to contact with me:

vuex-multi-tab-state's Issues

Use with encrypted localStorage

Hi, I'm wondering if there's any way to use this (really cool!) module together with encrypted localStorage (https://github.com/softvar/secure-ls).

I'm already using secure-ls for https://github.com/robinvdvleuten/vuex-persistedstate, so it'd be great if I could use the same (encrypted) localStorage for both modules.

I'd appreciate any ideas as to how this might be possible already; otherwise I'd like to submit this as a feature request.

Objects are not updating

First of all, thank you very much for your project! It saved me a lot of time!

I found a bug with keys deletion in a Vuex state object

it is similar to the closed issue with Array update

i've tried to delete key in object this way:

DELETE_KEY(state, key){ del state.obj[key] }

and obviously that didn't work because of the Vue reactivity. Then i've tried:
DELETE_KEY(state, key){ Vue.delete(state.obj, key) }

and that also didn't work. Lastly i've tried to delete object key with it's replacement of a new object. Also didn't work

Error: do not mutate vuex store state outside mutation handlers

Hi!

I'm trying to add vuex-multi-tab-state to an existing project and stuck with an error:

Error: do not mutate vuex store state outside mutation handlers

It's hard to provide a minimal example, but I found a possible cause.

Here it is:

vuex-multi-tab-state/src/index.ts

Line 56 in 0a46afc

return mergeWith(oldState, newState, mergeCustomizer);

If change to

return mergeWith({}, oldState, newState, mergeCustomizer);

(create a new one object instead of change original)

the error doesn't happen.

How to use with nuxt?

Hi. I've tried to set it using Nuxt but it does not work, I've declared it as a plugin in mystore.jsand it does nothing, I've setted it in my nuxt.config.js in modules block but result is the same.

I think it is the better vuex persistance plugin, please help me adding it. Thanks.

vuex-multi-tab-state and vuex-persistedstate

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 #30
• If no then I have a problem with duplicate storage

thanks

Document Vue 3 / vuex 4 compatibility

In a landscape where there is mixed support for the latest version of Vue, it would be great to have a small mention of version compatibility.

From glancing through closed issues, it seems like the project works fine with vuex 4, right?

how to secure localstorage vuex-multi-tab using SecureLS

Hi, any reference how to secure localstorage value set by vuex-multi-tab using SecureLS ???

lodash is a heavy dependency

Hi Gabriel,

First of all, great module! Love that it is in TypeScript.

Nice to have an alternative to vuex-shared-mutations.

---

I think lodash is a heavy dependency and the whole package would get bundled and shipped to the frontend.

If lodash functionality is really needed, then I think the project should use individual lodash modules.

You can install every lodash function separately via lodash.${functionName} package.

E.g. merge is available via https://www.npmjs.com/package/lodash.merge

Two vue projects sharing the same state and missing states

I made two vue projects. Project A needs this plugin's feature so I made project B to test this plugin. When project B proved to be working, I implemented the plugin on project A. But then I had an error when I tried to login in project A. It says that a state in project A is undefined and I tried to check by console logging the whole state of project A. What I found when console logging it was that the state from project B was in the state of project A even though project B was not running in my localhost. Also, there was a missing state from project A, the state that was missing looked like this :

  profile: {
    id: null,
    name: null,
    role: null,
    email: null,
    photoUrl: null,
    ownPatients: null,
    pastPatients: null,
  }

Does anyone know how to fix this or how to atleast get rid of Project B's data? Thanks.

Misleading documentation of onBeforeReplace and onBeforeSave

Hello,

I am looking for a way how to prevent the plugin from overwriting my state from the local storage if some condition matches. I think I found a solution by returning a falsy value from the onBeforeReplace hook, as that seems to prevent the replacement of the local vuex state. This behavior is also confirmed by the following test: https://github.com/gabrielmbmb/vuex-multi-tab-state/blob/master/test/test.spec.ts#L298

In contrast, the documentation of onBeforeReplace in the readme states the following:

hook function that receives the state and allows to modify it before replacing it. The function can return either a modified state or a falsy value (which means that no modifications has been done inside the hook)

From this documentation I cannot infer that the local state will not be updated when returning a falsy value. My first understanding of this sentence was, that returning a falsy value will just take the value from the local storage and overwrite the state without any modifications by the hook. The same misleading formulation is present in the documentation of onBeforeSave.

Is my understanding of the hooks correct? If yes, I am happy to contribute a better formulation for the readme.

Not Compatible with Vite

Vue2 is heading end of life at the end of this year. This library is not compatible with non-babel / webpack builds it seems.

RollupError: "pick" is not exported by "node_modules/dot-object/index.js", imported by "node_modules/vuex-multi-tab-state/lib/index.modern.js".

If anyone knows a decent alternative with minimal config deviations, would love suggestions.

Unable to clear localStorage key programmatically

It would be nice to be able to programmatically clear localStorage sometimes, i.e. when logging out a user or when updating the application in terms of state-related features that would (and do now...) cause errors due to old state (at least until dev tools' 'Clear application storage').

So far, I've had no luck using localStorage.removeItem(key) - nothing happens, even though the code is valid. I'm currently assuming that the event listener attached to storage events is interfering here:

vuex-multi-tab-state/src/tab.ts

Line 52 in e325971

addEventListener(key: string, cb: Function) {

If that's indeed what's happening, it seems like a less desirable side effect - I believe it's not intentional, or is it?

New values not set on next visit in the same browser

Problem

The problem that i am running into is that when i have visited my site that uses the multi tab state,
if a new multi tab state value is added that value won't set in the local storage nor is it watchable with vuex.

The new value will only be set in the local storage when I start trying to use the value. But the watcher is then still not working, so i have to reload the page and then only the new values that i have used will be set in the local storage and will be watchable.

Private (edge) / incognito(chrome) tab

But when i use a new private tab or an incognito tab all the values including the new values will be set. (aka a browser that hasn’t visited the site before will only work as intended)

Question

Does anybody know how to fix this issue? Is there some code that I should use to fix this issue or is there a method that I should call to fix this issue?

Is GPL license intended?

This looks exactly like what I need, but I was shocked to notice the license is GPL. This is much more restrictive than the MIT license used by vuex-persistedstate, vuex, or vue. It means there's no way in the world I can use this and I would have to implement something similar on my own, and I'm sure many others would be in the same boat.

So I'm wondering if this was an intentional choice. If so, you can close this issue and have a nice day. Otherwise, I would muchly appreciate changing the license to MIT (or similar) to match vuex-persistedstate.

Vue 3 / Vuex 4 support?

Hi, I've been using this plugin in Vue 2 and tried using it with Vue 3 and Vuex 4 now.

When more than 1 tab are open, CPU usage increases dramatically and the browser gets crippled and unresponsive.

So, now the question is: should Vue 3 with Vuex 4 be supported already, or is this plugin simply not there yet (if so, do you plan on updating it)?

Incompatibility with nuxt-vuex-localstorage

First of, this is an awesome plugin and works like charm on it's own!
I'm using it for a social login in a seperate tab and sync it to the previous tab which is working as expected.

My problem :
When using it with https://github.com/rubystarashe/nuxt-vuex-localstorage this plugin, that syncs localstorage to vuex and will update if the version is changed, your plugin will always overwrite all changes, so I'm not able to update the content that I'm storing in the vuex file, if it's not stored already.

My workaround atm :
Checking if there's a difference in the content and if, clear everything and reset it.
Using the other plugin on it's own, it would just be changing the version number.

Support store structure changing

For example, we have a user vuex-module with this state:

{
  token: '',
  name: '',
}

The state is saved in local storage.

createMultiTabState({ statesPaths: ['user']  })

{ "token": "tokenstring", "name": "Jonn Smith" }

But some reasons we change state object to:

{
  name: '',
  auth: {
    token: ''
  },
}

And now want to keep in storage only user.auth path.

createMultiTabState({ statesPaths: ['use.auth']  })

Reload page - and it removes the state auth key! The app is broken.

client.js?06a0:97 TypeError: Cannot read property 'token' of undefined

This error happens in the getter:

{
  isAuthenticated(state) {
    return !!state.auth.token;
  },
}

And yes, I can fix it:

{
  isAuthenticated(state) {
    return !!state.auth && !!state.auth.token;
  },
}

But maybe It will be better if vuex-multi-tab-state will respect the default state and do not override it if the path does not exist in the local storage. And do not create top-level state properties if they were removed from the default state. What do you think?

How to update state between tabs with condition?

Hello. I have a chat in my app. I want to sync tabs only when tab opened with the same chat. For this, i want to compare chat id's on tabs before sync. How i can do that?

Add compression possibility to save localStorage space

At the moment much space is lost because the object keys are often repeated. Maybe you can index all at the beginning and substitute it with numbers later. Or another solution. 5MB limit are too few :-(

Thanks for this awesome piece of code!

State is fully observed and deeply cloned instead of statePaths only

Hi,

The PR #64 introduced a bug. The full state is observed and is deeply cloned before the filtering of the statesPaths the next line.
This lead to a full state copy instead of only the portions we need to sync.

You should only clone the wanted portion of the state :

    if (statesPaths.length === 0) return { ...newState };
    
    statesPaths.forEach((statePath) => {
      const newValue = cloneObj(pick(statePath, newState)); // clone only the wanted path
      ...

The faulty line is here : https://github.com/abernh/vuex-multi-tab-state/blob/3d0bc186db0741309f1e1a42fb26dad964f5f5b5/src/index.ts#L48

Share state between CERTAIN tabs, but not ALL tabs

I have an application which can open several "documents" at a time. For each "document" there can be 1 or 2 tabs/windows. I need to share state between those 2 windows, but not ALL tabs/windows.

Document A - Window/Tab 1
Document B - Window/Tab 2
Document B - Window/Tab 3
Document C - Window/Tab 4
Document D - Window/Tab 5

ALL windows/tabs would share the main "application" state (which is a Vuex "module"). Only tabs with the same document would share "document" state.

What's the best way to do this?

Thanks,
Dave

How to set settings in nuxt

Hi, I'm currently working in a Nuxt project and I want your plugin to just store the login data, I've tried the follogin with not success:

// plugins/multiTabState.client.js

import createMultiTabState from 'vuex-multi-tab-state';

export default ({ store }) => {
  createMultiTabState({
      statesPaths: [
        'userLogged',
        'userDetails',
      ]
  })(store);
};

Without setting it works as expected, storing all my state variables, but setting some paths it just stop working, my store is the following:

// store/session.js
export const state = () => ({
   userLogged: false,
   userDetails: {},
   // A lot of variables
})

I'm using the multiple state variables to logout on all browser tabs when session expires, but I want the other data to keep locally instead of globally.

I hope you can help me.

Arrays are not being updated correctly

For example, if you have the following state:

state: {
  toDos: [ 'buy oranges', 'buy apples' ],
}

If you remove 'buy apples' item of the list in one tab, then the state will become:

state: {
  toDos: [ 'buy oranges' ],
}

and it will be saved in localStorage. The others tabs will have the old state and when they receive the storage event to update the state, the merge between the old state and the new state saved in localStorage will produce the following state:

state: {
  toDos: [ 'buy oranges', 'buy apples' ],
}

instead of:

state: {
  toDos: [ 'buy oranges' ],
}