State is shared between multiple applications. - vuex-persistedstate

Question

I'm working on multiple Vue sites that use vuex-persistedstate. There are certain modules I reuse between them, for example, the authentication. When I switch between them, I have the same user object in the state.

I guess this may be connected to the fact that the domain is the same (localhost:8000) but is there a way to solve this? For the simple fact that it is not fun to manually remove all data every time I switch between the apps.

Liel Fridman Liel Fridman · Accepted Answer · 2021-02-13T19:48:59

Something you can try is assigning a prefix (could be a suffix as well) that is unique to each app. Then, you can set up the getItem, setItem and removeItem methods inside createPersistedState. For example:

import { Store } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const KEY_PREFIX = 'PrefixUniqueToEachApp_';

const store = new Store({
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => localStorage.getItem(KEY_PREFIX + key),
        setItem: (key, value) => localStorage.setItem(KEY_PREFIX + key, value),
        removeItem: (key) => localStorage.removeItem(KEY_PREFIX + key),
      },
    }),
  ],
});

Should work. You can also use it with cookies (or any other type of storage) if you wish.

State is shared between multiple applications. - vuex-persistedstate

1 Answers