Vue3 Vuex Persist not saving data appropriately

Question

I'm having a difficult time getting Vuex-Persist to work properly. Basically, not saving the data it should:

Secondly, it disappears upon refresh. Which defeats the whole point of the library.

Here is my store file:

import { createStore } from "vuex";
import Modules from "./modules";
import VuexPersistence from "vuex-persist";
import Cookies from "js-cookie";

const vuexLocal = new VuexPersistence({
    restoreState: (key: any, storage: any): any => Cookies.get("my-abseil-v3"),
    saveState: (key, state, storage: any): any => {
        return Cookies.set("my-abseil-v3", state, {
            expires: 3,
        });
    },
    modules: ["Auth"],
});

export default createStore({
    plugins: [vuexLocal.plugin],
    modules: { ...Modules },
});

My Auth module code:

import { createStore } from "vuex";
import Modules from "./modules";
import VuexPersistence from "vuex-persist";
import Cookies from "js-cookie";

const vuexLocal = new VuexPersistence({
    restoreState: (key: any, storage: any): any => Cookies.get("my-abseil-v3"),
    saveState: (key, state, storage: any): any => {
        return Cookies.set("my-abseil-v3", state, {
            expires: 3,
        });
    },
    modules: ["Auth"],
});

export default createStore({
    plugins: [vuexLocal.plugin],
    modules: { ...Modules },
});

And my vue.config:

module.exports = {
    transpileDependencies: ["vuex-persist"],
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/css/components/_breakpoints.scss";`,
            },
        },
    },
};

This is per the documentations so not sure where I'm wrong.

Ended up using a different library. This would simply not work in Vue3... — Riza Khan, Sep 05 '21 at 00:33

score 0 · Answer 1 · answered Aug 20 '21 at 19:36

0

have you tried JSON.stringify and JSON.parse?

const vuexLocal = new VuexPersistence({
    restoreState: (key: any, storage: any): any => 
        JSON.parse(Cookies.get("my-abseil-v3")),
    saveState: (key, state, storage: any): any => {
        return Cookies.set("my-abseil-v3", JSON.stringify(state), {
            expires: 3,
        });
    },
    modules: ["Auth"],
});

answered Aug 20 '21 at 19:36

daanmlab

21
1

Did not work :(. Actually gave me a type error to (string | undefined) can't be assigned to string. – Riza Khan Aug 21 '21 at 15:13

score 0 · Answer 2 · answered Aug 21 '21 at 20:36

0

What about this?

const vuexLocal = new VuexPersistence({
  restoreState: (key, storage) => Cookies.getJSON(key),
  saveState: (key, state, storage) =>
    Cookies.set(key, state, {
      expires: 3
    }),
  modules: ["Auth"],
});

answered Aug 21 '21 at 20:36

daanmlab

21
1

Ended up going with Vue persistdata plugin. It was about 100x easier to implement – Riza Khan Aug 22 '21 at 00:50

Vue3 Vuex Persist not saving data appropriately

2 Answers2