共计 1574 个字符，预计需要花费 4 分钟才能阅读完成。
在 vue 项目中用 vuex 来做全局的状态管理，发现当刷新网页后，保存在 vuex 实例 store 里的数据会丢失。
原因：
因为 store 里的数据是保存在运行内存中的, 当页面刷新时，页面会重新加载 vue 实例，store 里面的数据就会被重新赋值初始化
解决思路：
将 state 的数据保存在 localstorage、sessionstorage 或 cookie 中（三者的区别），这样即可保证页面刷新数据不丢失且易于读取。
localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失。
sessionStorage:sessionStorage 的生命周期是在仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的。
cookie:cookie 生命期为只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为 4K 左右, 有个数限制（各浏览器不同），一般不能超过 20 个。缺点是不能储存大数据且不易读取。
由于 vue 是单页面应用，操作都是在一个页面跳转路由，因此 sessionStorage 较为合适, 原因如下：
sessionStorage 可以保证打开页面时 sessionStorage 的数据为空；
每次打开页面 localStorage 存储着上一次打开页面的数据，因此需要清空之前的数据。
vuex 中 state 数据的修改必须通过 mutation 方法进行修改，因此 mutation 修改 state 的同时需要修改 sessionstorage, 问题倒是可以解决但是感觉很麻烦，state 中有很多数据，很多 mutation 修改 state 就要很多次 sessionstorage 进行修改，既然如此直接用 sessionstorage 解决不就行了，为何还要用 vuex 多此一举呢？vuex 的数据在每次页面刷新时丢失，是否可以在页面刷新前再将数据存储到 sessionstorage 中呢，是可以的，beforeunload 事件可以在页面刷新前触发，但是在每个页面中监听 beforeunload 事件感觉也不太合适，那么最好的监听该事件的地方就在 app.vue 中。
在 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”))))
}
// 在页面刷新时将 vuex 里的信息保存到 sessionStorage 里
window.addEventListener(“beforeunload”,()=>{
sessionStorage.setItem(“store”,JSON.stringify(this.$store.state))
})
}
}
