Vue刷新页面后如何避免store数据丢失问题？

本文共计2158个文字，预计阅读时间需要9分钟。

当刷新页面时，Vue实例会重新加载，此时store也会被重置。可以在刷新前将store的状态保存到本地存储（localStorage、sessionStorage或cookie）中。localStorage用于永久存储，每次刷新页面时会读取上次保存的数据。

刷新页面时vue实例重新加载，store就会被重置，可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage是储存到关闭为止，cookie不适合存大量数据。根据我的需求，最合适的是sessionStorage。

beforeunload在页面刷新时触发，可以监听这个方法，让页面在刷新前存store到sessionStorage中。

当然，在页面刷新时还要读取sessionStorage中的数据到store中，读取和储存都写在app.vue中。