Vue store刷新数据丢失怎么处理呢?网站很多方法思路,常见的是就是sessionStorage
和localStorage
但是我觉得这样并不能良好的解决Vue页面刷新store数据丢失的问题。
说说sessionStorage和localStorage
大致思路:监听页面刷新 -> 将store
存到sessionStorage
或localStorage
-> 页面加载 -> 取出sessionStorage
或localStorage
替换store
。
这种方法有一个问题,如果某个store
是通过接口请求的,那意味着这个接口会有变化,比如后端或者数据库改变了,这个时候刷新页面,那么存下的这个store
仍然是上次接口输出未变化的数据。
sessionStorage
和localStorage
的方法很多,也并不是不可用,比如常见的字典等不变化的,可以用这种方案完全是没有问题的。具体方法,百度到处都有教程。
那么刷新不丢失store什么方法最好?
对于接口请求回来存的store
,推荐在App.vue
中用this.$store.dispatch
来做请求,因为每次加载页面都要走App.vue
,所以你刷新也是要走这个页面的。
那么是不是一定放在App.vue
呢?不一定,比如一个后台,或者有权限的页面才能请求接口,那么建议在权限的地方做store.dispatch
请求,例如vue-element-admin,就推荐在permission.js
做store.dispatch,而不是在App.vue。