解决vuex数据在页面刷新被重置的问题

最新推荐文章于 2025-07-23 08:25:51 发布

原创最新推荐文章于 2025-07-23 08:25:51 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vuex

vue.js 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何解决Vuex在页面刷新时数据丢失的问题。通过在页面加载时从sessionStorage读取状态，并在刷新前将Vuex状态保存到sessionStorage中，确保数据能够跨页面刷新保持。这一方法对于维护应用状态的持久性非常实用。

vuex数据是保存在内存中的，页面每次刷新都会导致vuex里的数据被重置，目前的方案是在页面刷新前把数据存到localStorage

在App.vue内操作:

export default {
  name: 'App',
  data() {
    return {    
    }
  },
  created() {
    //解决vuex数据在页面刷新被重置的问题 

    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
    }

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