如何解决vuex刷新页面以后丢失store的数据问题

最近遇到个问题，vue 中vuex中的store数据，会在页面刷新后初始化，为了解决这一问题决定将store里面数据在页面刷新前保存到sessionStorage，至于为何用他，因为页面关闭后他会被清空，localStorage则会一直存在，cookie又太小，因此sessionStorage最合适。

解决方案

• 在 app.vue 的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态
• 在beforeunload方法中将store.state存储到sessionstorage中。

export default {
  name: 'app',
  created () {
    // 在页面加载时读取 sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将 store 保存到 sessionStorage 里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

以上关于如何解决vuex刷新页面以后丢失store的数据问题的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。