Why Vuex-persist doesn't store anything in localStorage?

Question

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.

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.

This is StructureModule.ts

import { ActionTree, MutationTree, GetterTree, Module } from "vuex";

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: "",
            description: "",
            props: [
                {
                    name: "",
                    type: "",
                    description: "",
                },
            ],
        },
    ],
};

export const actions: ActionTree<IState, any> = {
    addNewDataStructure({ commit }, payload: IStructureState): void {
        commit("ADD_DATA_STRUCTURE", payload);
    },
    updateDataStructure({ commit }, payload: IStructureState): void {
        commit("UPDATE_EXISTING_DATA_STRUCTURE", payload);
    },
    clearDataStructure({ commit }, { name }: IStructureState): void {
        commit(" CLEAR_DATA_STRUCTURE", name);
    },
};

export const mutations: MutationTree<IState> = {
    ADD_DATA_STRUCTURE(state: IState, payload: IStructureState) {
        if (state.structures[0].name === "") {
            state.structures.splice(0, 1);
        }
        state.structures.push(payload);
    },

    CLEAR_DATA_STRUCTURE(state: IState, name: string) {
        state.structures.filter((structure: IStructureState) => {
            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) => {
            if (structure.name === payload.name) {
                state.structures[state.structures.indexOf(structure)] = payload;
            }
        });
    },
};

export const getters: GetterTree<IState, any> = {
    dataStructureByName(state: IState, structName: string): IStructureState[] {
        const structure: IStructureState[] = state.structures.filter((struct: IStructureState) => {
            if (struct.name === structName) {
                return struct;
            }
        });
        return structure;
    },

    dataStructures(): IStructureState[] {
        return state.structures;
    },
};

export const StructureModule: Module<IState, any> = {
    namespaced,
    state,
    mutations,
    actions,
    getters,
};

This is index.ts

import Vue from "vue";
import Vuex, { ModuleTree } from "vuex";
import VuexPersistence from "vuex-persist";

import { StructureModule , IState} from "./modules/StructureModule";

Vue.use(Vuex);

const storeModules: ModuleTree<IState> = {
    StructureModule,
};

const vuexPersistentSessionStorage = new VuexPersistence({
    key: "test",
    modules: ["StructureModule"],
});


export default new Vuex.Store<any>({
    modules: storeModules,
    plugins: [vuexPersistentSessionStorage.plugin],
});

This is main.ts


import store from "@/store/index.ts";
import * as $ from "jquery";
import Vue from "vue";

import App from "./App.vue";
import router from "./router";

global.EventBus = new Vue();
(global as any).$ = $;
Vue.config.productionTip = false;
console.log(store);
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

This is vue.config.js

module.exports = {
    transpileDependencies: ["vuex-persist"],
};

This is store in vue-devtool And this is dev-tool localStorage

I expect that in localstorage to appear an storage with key "test" with predefined values, but instead of this localStorage is empty.

score 4 · Answer 1 · edited Sep 29 '20 at 08:41

4

As said in the guide

The only way to actually change state in a Vuex store is by committing a mutation

https://vuex.vuejs.org/guide/mutations.html

I don't see any mutation in your code.

Otherwise, you should take a look at https://github.com/robinvdvleuten/vuex-persistedstate, it seems to be more popular, and I've been using it without any problem.

Usage is very simple : you just need to declare a plugin inside your store:

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
})

edited Sep 29 '20 at 08:41

Luuklag

3,897
11
38
57

answered Jun 20 '19 at 12:14

jaudo

2,022
4
28
48

Unfortunately solution that you provided also doesn't work, anyway thank you. It seems that problem is more about some configuration. Also, I forgot to say that code is running on localhost:8080 with vue-cli-service serve. – Vasile Mustuc Jun 20 '19 at 12:27
The problem may be that your store is empty. I don't see any mutations in your code. – jaudo Jun 20 '19 at 12:44
Are you calling any of these mutations? – jaudo Jun 20 '19 at 13:10
Yes, in "actions" are called. And the specific action is called through `@Action("updateDataStructure", { namespace: "StructureModule" }) public updateDataStructure!: (structure: IStructureModel) => {}; ` – Vasile Mustuc Jun 20 '19 at 13:11
Are you using Vue DevTools? Is there anything in the "Vuex" tab? – jaudo Jun 20 '19 at 13:21
I updated question description and provide two screen-shots , with vue-devtools and localStorage. They are under last code example. – Vasile Mustuc Jun 20 '19 at 13:24
Here is a simple example : https://codesandbox.io/s/vuex-store-8lws0. The only thing I've done is to add plugins: [createPersistedState()] in store declaration. Can you reproduce your bug in codesandbox? – jaudo Jun 20 '19 at 14:07

score 1 · Answer 2 · edited Sep 29 '20 at 08:41

1

I found solution for this problem. In my case i just remove namespaced from

export const StructureModule: Module<IState, any> = {
    namespaced, <----- This
    state,
    mutations,
    actions,
    getters,
};

It seems namespaced should be used only if you have more than one module.

edited Sep 29 '20 at 08:41

Luuklag

3,897
11
38
57

answered Jun 21 '19 at 07:36

Vasile Mustuc

51
1
5

Why Vuex-persist doesn't store anything in localStorage?

2 Answers2