Vue页面刷新store数据丢失最好的解决办法

Vue store刷新数据丢失怎么处理呢?网站很多方法思路,常见的是就是sessionStoragelocalStorage但是我觉得这样并不能良好的解决Vue页面刷新store数据丢失的问题。

说说sessionStorage和localStorage

大致思路:监听页面刷新 ->  将store存到sessionStoragelocalStorage -> 页面加载 -> 取出sessionStoragelocalStorage替换store

这种方法有一个问题,如果某个store是通过接口请求的,那意味着这个接口会有变化,比如后端或者数据库改变了,这个时候刷新页面,那么存下的这个store仍然是上次接口输出未变化的数据。

sessionStoragelocalStorage的方法很多,也并不是不可用,比如常见的字典等不变化的,可以用这种方案完全是没有问题的。具体方法,百度到处都有教程。

那么刷新不丢失store什么方法最好?

对于接口请求回来存的store,推荐在App.vue中用this.$store.dispatch来做请求,因为每次加载页面都要走App.vue,所以你刷新也是要走这个页面的。

那么是不是一定放在App.vue呢?不一定,比如一个后台,或者有权限的页面才能请求接口,那么建议在权限的地方做store.dispatch请求,例如vue-element-admin,就推荐在permission.js做store.dispatch,而不是在App.vue。

发表回复