前端页面刷新后避免Vuex状态丢失

最新推荐文章于 2025-04-30 15:18:25 发布

原创最新推荐文章于 2025-04-30 15:18:25 发布 · 666 阅读

0 ·

CC 4.0 BY-SA版权

前端路专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在Vue.js应用中实现状态持久化的简单方法。通过监听Vue的created生命周期钩子并结合beforeunload事件，可以在浏览器刷新时将Vuex的状态保存到sessionStorage中。此外，还展示了如何在应用启动时从sessionStorage中恢复这些状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步

监听Vue.created事件，并添加beforeunload事件，在浏览器刷新前，保存状态至sessionStorage中

export default {
  name: 'app',
  created () {
  	// 监听beforeunload事件
    window.addEventListener('beforeunload', () => {
      //  在页面卸载是保存状态至sessionStorage
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

第二步

在初始化Vuex.store时，有选择的加载state


const state = sessionStorage.getItem('store')
  ? JSON.parse(sessionStorage.getItem('store'))
  : {
    index: 0
  }
 
export default new Vuex.Store({
  state,
  mutations: {
    ADD_INDEX: (state) => { state.index += state.index }
  },
  actions: {
  }
})