问题描述：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，在后面的页面刷新发现解决了这个问题