一、问题背景：
用户登录后，从后端接口获取到用户名称、头像、用户ID等信息，存Store，然后渲染展示
但是 F5 刷新界面后，Store里面的用户信息就没有了,原因是因为刷新页面时，vue实例重新加载，从而store也被重置了。store是用来存储组件状态的，而不是用来做本地数据存储的。所以，对于不希望页面刷新之后被重置的数据，使用本地存储来进行存储。
二、解决方案
通常的解决方案我们可以用本地存储，本地存储的实现方式常见的包含：
cookie: 不适合存储大量的数据。
localStorage: 是永久存储，浏览器关闭后数据不会丢失，除非主动删除数据。当关闭页面后重新打开，会读取上一次打开的页面数据。
sessionStorage: 在当前浏览器窗口关闭后自动删除。所以，sessionStorage 最合适
这里我推荐使用sessionStorage，实现方式如下
在App.vue处理
<script>
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))
})
},
mounted() {},
}
</script>