Vuex 刷新后数据丢失问题 Typescript

问题描述：Vuex保存的数据在页面刷新后会全部丢失清除

问题解决方案：使用sessionstorage进行保存，在页面刷新时保存至sessionStorage,页面在加载时再进行填充   (另有vuex-persistedstate  插件可以解决这个问题，本人是使用typescript，使用‘vuex-module-decorators’注册vuex各module，不知如何使用该插件，就没有尝试过，想试试的可以去搜索，很多这方面文章)

在App.vue 中

import { UserModule } from '@/store/modules/user'

 

export default {

  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    } //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      console.log('setstore')
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }

}

可能很多人也是这样做的，本人也是这么处理的，但是却一直没有作用，不知是否有和我同样的情况。可能个人情况不同，记录一下给自己备忘，给各位一个参考吧

但是在调试过程中记录log可以看到确实是执行了，但是确实没有效果，几经调试，发现下图中这个Register module：user，似乎每次刷新都会重新注册一次vuex，所以我在想是不是我其实是赋值到vuex中了，但是后面注册又重新初始化了vuex才导致数据一直没有初始化成功，所以我在App.vue 刚进入的时候就import了需要缓存的vuex，在后面的页面刷新发现解决了这个问题