Vue 刷新网页后 vuex 的 state 数据丢失的解决方案

Posted 2023-03-11

参考技术A

原因很简单，因为 store 里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载 Vue 实例， store 里面的数据就会被重新赋值。

一般情况下有两种解决方案
(a). state 里的数据全部是通过请求来触发 action 或 mutation 来改变
(b). 将 state 里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中

很显然，第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。
而第二种可以保证刷新页面数据不丢失且易于读取。

首先我们看一下有几种 存储 , 然后选择合适的客户端存储:

localStorage 是永久存储在本地，除非你主动去删除;
sessionStorage 是存储到当前页面关闭为止;
cookie 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取。

我选择的是 sessionStorage , 因为 Vue 是单页面应用，操作都是在一个页面跳转路由，另一个原因是 sessionStorage 可以保证打开页面时 sessionStorage 的数据为空，而如果是 localStorage 则会读取上一次打开页面的数据。

第一种方案

由于state里的数据是响应式，所以sessionStorage存储也要跟随变化。
再者vuex规定所有state里数据必须通过mutation方法来修改，
所以第一种方案就是mutation修改state的同时修改sessionStorage对应存储的属性

第二种方案

第一种方案确实可以解决问题，但这种方法很明显让人觉得怪异，不如直接用 sessionStorage 来做状态管理更简单些。那问题来了, 怎么才能不用每次修改 state 时同时也要修改 sessionStorage 呢？

这时 beforeunload 可以为我们很好的解决这个问题, 它是在页面刷新时先触发的。并放在 app.vue 这个入口组件中，这样就可以保证每次刷新页面都可以触发。如下: