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

Question

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

我尝试从“true”和“false”切换“安全”选项，但它没有解决它。我正在使用 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
}

});

我希望在页面刷新后状态会重新水化。

标签： vue.jsvuexjs-cookie

Answer 1

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

getItem: key => Cookies.getJSON(key)

对此：

getItem: key => Cookies.get(key)

这个问题在我的一些模块上得到了解决。

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

希望这可以帮助像我一样陷入困境的任何人。