Vue3 Vuex Persist 未正确保存数据

Question

我很难让 Vuex-Persist 正常工作。基本上，不应该保存数据：

其次，它会在刷新时消失。这破坏了图书馆的全部意义。

这是我的商店文件：

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 },
});

我的认证模块代码：

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 },
});

还有我的vue.config：

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

这是documentations，所以不确定我错在哪里。

Answer 1

这个呢？

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

Answer 2

您尝试过 JSON.stringify 和 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"],
});