解决vuex状态刷新网页时数据被清空问题

最新推荐文章于 2024-07-02 17:47:34 发布

原创最新推荐文章于 2024-07-02 17:47:34 发布 · 3.5k 阅读

24 ·

CC 4.0 BY-SA版权

html5 同时被 2 个专栏收录

10 篇文章

订阅专栏

vue学习

7 篇文章

订阅专栏

本文介绍了一种在Vue应用中使用Vuex进行状态管理时，通过sessionStorage实现状态持久化的方法，避免了网页刷新导致的数据丢失问题。具体实现包括在main.js中添加代码来保存和恢复Vuex的状态。

vuex状态管理，在网页刷新数据被清空的解决方法。

在main.js中写入下面的代码段（亲测有效）

//刷新保存状态
if (sessionStorage.getItem("store")) {
    store.replaceState(
        Object.assign(
            {},
            store.state,
            JSON.parse(sessionStorage.getItem("store"))
        )
    );
    sessionStorage.removeItem("store")
}

//监听，在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
    sessionStorage.setItem("store", JSON.stringify(store.state));
});