如何解决vuex页⾯刷新数据丢失问题？
1、问题描述：
⼀般在登录成功的时候需要把⽤户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页⾯刷新的时候vuex⾥的数据会重新初始化，导致数据丢失。因为vuex⾥的数据是保存在运⾏内存中的，当页⾯刷新时，页⾯会重新加载vue实例，vuex⾥⾯的数据就会被重新赋值。
2、解决思路：
办法⼀：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
办法⼆：在页⾯刷新的时候再次请求远程数据，使之动态更新vuex数据
办法三：在⽗页⾯向后台请求远程数据，并且在页⾯刷新前将vuex的数据先保存⾄sessionStorage（以防请求数据量过⼤页⾯加载时拿不到返回的数据）
分析：
办法⼀的缺点是不安全，不适⽤⼤数据量的存储；
办法⼆适⽤于少量的数据，并且不会出现⽹络延迟；
办法三是要讲的重点，办法⼆和办法⼀⼀起使⽤。
3、解决过程：
3.1、选择合适的浏览器存储
localStorage -- 是永久存储在本地，除⾮你主动去删除;
sessionStorage -- 是存储到当前页⾯关闭为⽌，和其他tab页没关联;
cookie -- 则根据你设置的有效时间来存储，但缺点是不能储存⼤数据且不易读取，会和后台进⾏交互。
本⽅法选择的是sessionStorage，选择的原因是由于vue是单页⾯应⽤，操作都是在⼀个页⾯跳转路由，另⼀个原因是sessionStorage可以保证打开页⾯时sessionStorage的数据为空，⽽如果是localStorage则会读取上⼀次打开页⾯的数据。
3.2、解决⽅案
由于state⾥的数据是响应式，所以sessionStorage存储也要跟随变化，⽽且只能通过mutations来改变st
ate中的值。
⾸先在⽤户登录成功之后，然后把⽤户信息，菜单信息通过actions分发保存⾄vuex中。然后在菜单页⾯计算vuex中state的菜单数据，将数据解析组装成前端组件所需的格式，然后渲染组件，⽣成菜单树。如果页⾯没有刷新，则⼀切正常。
登录成功后将⽤户和菜单数据同步⾄vuex
登录成功后将数据同步⾄vuex
在菜单页⾯监听vuex中菜单数据
监听菜单数据
页⾯刷新的解决⽅案：
页⾯刷新的时候异步请求后台数据，然后动态更新vuex中的数据，其中会有⼀种情况就是，⽹络延迟、数据量⼤的问题。此时还没等vuex 获取到后台返回的数据，页⾯就已经加载完成了，这样就会造成数据丢失。所以该解决⽅案就是，监听浏览器刷新前事件，在浏览器刷新之前就把vuex⾥的数据保存⾄sessionStorage中，刷新成功后如果异步请求的数据还没返回则直接获取sessionStorage⾥的数据，否
则获取vuex⾥的数据。（只有刷新后还没取到后台数据，才会从sessionStorage⾥取。确保数据的安全性，就算获取sessionStorage⾥的数据也是安全的，因为每次刷新都会重新赋值，不必担⼼数据被篡改问题，其次就是对sessionStorage⾥的数据做了加密操作）
sessionstorage和localstorage在⽗页⾯向后台请求数据，并且监听浏览器刷新前事件，将vuex数据保存⾄sessionStorage
在这⾥插⼊图⽚描述
在⽗页⾯向后台请求数据，将返回的数据分发⾄vuex

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。