Fe-interview: [vue] 页面刷新后vuex的state数据丢失怎么解决？

[haizhilin2013]

[vue] 页面刷新后vuex的state数据丢失怎么解决？

[wenyejie]

一般来说, 可以考虑react的状态管理, 他是直接存储在storage里面

[forever-z-133]

好像还是得靠 localStorage，在 mutations 里面得加些缓存相关代码

[slmyer]

就是放在localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate

[StonePang]

首先要搞清楚为什么state数据会丢失。

通常情况state里的初始数据是空，通过mutation或者action的方法获取实际数据后存放在state中。这些方法往往是在某个组件（组件A）的生命周期或者事件中调用。如果在刷新页面的时候这些方法没有被调用（例如此时页面中没有组件A，或组件A的对应事件没有被触发），那么就没有获取实际数据，state的数据就是初始的空。

对症下药，就是要确保刷新页面以后调用对应的获取数据方法。
最万金油的解决是在App.vue的mounted生命周期中去调用这些方法。不管在哪个路由下刷新页面，总会执行。

个人理解，轻拍。

[XSJXSJ111]

个人做法是在组件的生命周期created()里调用actions里的获取收据方法fetchData(),然后fetchData()里面判断state里面有没数据，有的话return，没有的话就请求接口获取数据，这样每次刷新页面或者重新进入页面既能保证state里有需要的数据，又能不调用多余的请求

[desireYoo]

vuex-persistedstate的createPersistedState()方法，谁用谁知道

[impeiran]

首先要搞清楚为什么state数据会丢失。

通常情况state里的初始数据是空，通过mutation或者action的方法获取实际数据后存放在state中。这些方法往往是在某个组件（组件A）的生命周期或者事件中调用。如果在刷新页面的时候这些方法没有被调用（例如此时页面中没有组件A，或组件A的对应事件没有被触发），那么就没有获取实际数据，state的数据就是初始的空。

对症下药，就是要确保刷新页面以后调用对应的获取数据方法。
最万金油的解决是在App.vue的mounted生命周期中去调用这些方法。不管在哪个路由下刷新页面，总会执行。

个人理解，轻拍。

他的意思是F5那种刷新。。占用的内存重新释放了

[WenJieLi1998]

监听浏览器刷新前的事件，在浏览器刷新之前就把vuex里的数据保存至sessionStorage中，刷新成功后如果异步请求的数据还没返回则直接获取sessionStorage里的数据，否则获取vuex里的数据。

[tzzhmm]

个人做法：
1、每次在mutation中set state的时候，同步的塞到sessionStorage一份
2、状态初始化的时候，从sessionStorage中读取相应内容并作为默认值(存在的话)