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

Question

我正在将Vuex与cookie存储一起使用，但是当我执行F5页面刷新时，状态会丢失。我不知道为什么。

我尝试将“安全”选项从“真”和“假”切换，但无法解决。我正在使用IIS在本地环境中进行测试。

从'js-cookie'导入*作为Cookies； 从'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数据对象一样具有反应性。

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