带有 Cookie 存储的 Vuex 在页面刷新后丢失状态

Question

我正在使用带有 cookie 存储的 Vuex，但是当我执行 F5 页面刷新时，状态丢失了。我不明白为什么。

我试过从 "true" 和 "false" 切换 "secure" 选项，但没有解决问题。我正在使用 IIS 在我的本地环境中进行测试。

从 'js-cookie' 导入 * 作为 Cookie；从 'vuex-persistedstate';

导入 createPersistedState

导出默认新 Vuex.Store({

strict: true,
plugins: [

    createPersistedState({
        storage: {
            getItem: key => Cookies.getJSON(key),
            setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
            removeItem: key => Cookies.remove(key)
        }
    })
],

actions,
modules: {

    module1,
    module2,
    module3,
    module4,
    module5,
    module6,
    module7,
    module8,
    module9
}

});

我希望状态在页面刷新后恢复。

Answer 1

抱歉回复晚了。感谢 fstep 的回复。问题是 "getJSON" 方法反序列化了 JSON 字符串，而 "vuex-persistedstate" 库需要 JSON 字符串。一旦我改变了这一行：

getItem: key => Cookies.getJSON(key)

对此：

getItem: key => Cookies.get(key)

问题已在我的一些模块上解决。

我还添加了多个 cookie 并减少了持久保存到 cookie 的状态。导致我出现问题的另一件事是我没有在状态对象中声明我的所有字段。文档确实说明这样做是因为它们像 Vue.js 数据对象一样具有反应性。

希望这对像我一样被卡住的人有所帮助。

带有 Cookie 存储的 Vuex 在页面刷新后丢失状态

Vuex with Cookie Storage loses state after Page Refresh

vue.js

vuex

js-cookie