title: Why Vuex-persist doesn't store anything in localStorage?
body: <p>So, in my project (Vue-cli + TypeScript) I need to store user data to locaStorage. For this purpose I decide to use vuex-persist (npm plugin) alongside with vuex. But in DevTool,  in localStorage doesn't appear anything. What is wrong in my code. Thank  you in advance.</p>
  <p>In precedent project I already used this combination of tools, and they work fine. In this project I use the same configuration, and it doesn't work . And this is the most strange thing.</p>
  <p>This is StructureModule.ts</p>
  <pre class="lang-typescript prettyprint-override"><code>import { ActionTree, MutationTree, GetterTree, Module } from &quot;vuex&quot;;
  
  const namespaced: boolean = true;
  
  interface IDataStructure {
      name: string;
      type: string;
      description: string;
  }
  
  interface IStructureState {
      name: string;
      description: string;
      props: IDataStructure[];
  }
  
  
  export interface IState {
      structures: IStructureState[];
  }
  
  export const state: IState = {
      structures: [
          {
              name: &quot;&quot;,
              description: &quot;&quot;,
              props: [
                  {
                      name: &quot;&quot;,
                      type: &quot;&quot;,
                      description: &quot;&quot;,
                  },
              ],
          },
      ],
  };
  
  export const actions: ActionTree&lt;IState, any&gt; = {
      addNewDataStructure({ commit }, payload: IStructureState): void {
          commit(&quot;ADD_DATA_STRUCTURE&quot;, payload);
      },
      updateDataStructure({ commit }, payload: IStructureState): void {
          commit(&quot;UPDATE_EXISTING_DATA_STRUCTURE&quot;, payload);
      },
      clearDataStructure({ commit }, { name }: IStructureState): void {
          commit(&quot; CLEAR_DATA_STRUCTURE&quot;, name);
      },
  };
  
  export const mutations: MutationTree&lt;IState&gt; = {
      ADD_DATA_STRUCTURE(state: IState, payload: IStructureState) {
          if (state.structures[0].name === &quot;&quot;) {
              state.structures.splice(0, 1);
          }
          state.structures.push(payload);
      },
  
      CLEAR_DATA_STRUCTURE(state: IState, name: string) {
          state.structures.filter((structure: IStructureState) =&gt; {
              if (structure.name === name) {
                  state.structures.splice( state.structures.indexOf(structure), 1);
              }
          });
      },
  
      UPDATE_EXISTING_DATA_STRUCTURE(state: IState, payload: IStructureState) {
          state.structures.map((structure: IStructureState) =&gt; {
              if (structure.name === payload.name) {
                  state.structures[state.structures.indexOf(structure)] = payload;
              }
          });
      },
  };
  
  export const getters: GetterTree&lt;IState, any&gt; = {
      dataStructureByName(state: IState, structName: string): IStructureState[] {
          const structure: IStructureState[] = state.structures.filter((struct: IStructureState) =&gt; {
              if (struct.name === structName) {
                  return struct;
              }
          });
          return structure;
      },
  
      dataStructures(): IStructureState[] {
          return state.structures;
      },
  };
  
  export const StructureModule: Module&lt;IState, any&gt; = {
      namespaced,
      state,
      mutations,
      actions,
      getters,
  };
  </code></pre>
  <p>This is index.ts</p>
  <pre class="lang-typescript prettyprint-override"><code>import Vue from &quot;vue&quot;;
  import Vuex, { ModuleTree } from &quot;vuex&quot;;
  import VuexPersistence from &quot;vuex-persist&quot;;
  
  import { StructureModule , IState} from &quot;./modules/StructureModule&quot;;
  
  Vue.use(Vuex);
  
  const storeModules: ModuleTree&lt;IState&gt; = {
      StructureModule,
  };
  
  const vuexPersistentSessionStorage = new VuexPersistence({
      key: &quot;test&quot;,
      modules: [&quot;StructureModule&quot;],
  });
  
  
  export default new Vuex.Store&lt;any&gt;({
      modules: storeModules,
      plugins: [vuexPersistentSessionStorage.plugin],
  });
  
  </code></pre>
  <p>This is main.ts</p>
  <pre class="lang-typescript prettyprint-override"><code>
  import store from &quot;@/store/index.ts&quot;;
  import * as $ from &quot;jquery&quot;;
  import Vue from &quot;vue&quot;;
  
  import App from &quot;./App.vue&quot;;
  import router from &quot;./router&quot;;
  
  global.EventBus = new Vue();
  (global as any).$ = $;
  Vue.config.productionTip = false;
  console.log(store);
  new Vue({
    router,
    store,
    render: (h) =&gt; h(App),
  }).$mount(&quot;#app&quot;);
  </code></pre>
  <p>This is vue.config.js</p>
  <pre class="lang-javascript prettyprint-override"><code>module.exports = {
      transpileDependencies: [&quot;vuex-persist&quot;],
  };
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/kkAR6.png" rel="nofollow noreferrer">This is store in vue-devtool</a>
  <a href="https://i.stack.imgur.com/SXzIf.png" rel="nofollow noreferrer">And this is dev-tool localStorage</a></p>
  <p>I expect that in localstorage to appear an storage with key &quot;test&quot; with predefined values, but instead of this localStorage is empty.</p>