vuex页面刷新数据不保留,解决方法(转)
今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题。场景:
VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app.vue里通过接口获取然后存储在vueX里的,在路由activity.vue中,我们需要用到这个变量,并且通过这个变量的值来控制路由页面里某一段dom元素的显示与否。
这个需求这样描述起来,是很好实现的。于是我就简单写了几段代码,很简单轻松的实现了这个需求:
//acitity.vue
Dom结构
![88a95f85db1708cccfe2de9a7034d8be.png](https://i-blog.csdnimg.cn/blog_migrate/b1e29d37ac995f020305d3bc880da981.jpeg)
Created生命周期
![1175ff501822656844d3d10e16618ee5.png](https://i-blog.csdnimg.cn/blog_migrate/c1b9d2bf85b588acf38da6abeae8c43b.jpeg)
我只需要在created生命周期里面,给posVersion这个变量赋值成this.$store.state.PV即可。
至此,这个需求看上去很“完美”的完成,没有任何问题。
直到。。。 。。。BUG场景:
直到测试的同学告诉我,首次进入路由,posVersion这个值为true的时候,dom元素正常显示,当用户F5刷新整个页面的时候,本应该继续显示的dom元素却不见了。
我复现了这个BUG,在created里面console.log(this.$store.state.PV),却输出了一个空。但是如果单纯刷新路由的话,dom元素还是可以正常显示的。
这是什么鬼呢到底?
在解决这个问题之前,我们先了解几个概念:什么是VueX?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用,它是另一种意义上的变量提升。路由刷新路由刷新是无刷新跳转,表面看起来就像是一个app应用,表现效果就像你写的 tab 选项卡,所有的数据都还存在内存里,页面是无重载的。F5页面刷新F5刷新做了什么事呢,重新载入页面,销毁之前所有的数据。
所以,这个bug出现的问题就很好理解了,F5页面刷新,页面销毁之前的资源,重新请求,因此写在生命周期里的vuex数据是重新初始化,无法获取的,这也就是为什么会打印出空的原因。
那么既然知道问题的原因了?应该怎么处理这个问题。
解决思路1:
Localstorage 这是很容易想到的方法。将this.$store.state.PV存入到缓存里之后,然后监听页面重载事件,如果页面重新载入了,那就从缓存里读取数据,然后赋值,这样我们的dom元素就又可爱的回到了文档中间。
这个方法可以解决这个问题。但是如果需要用到localstorage的话,我完全可以让我的蒙蒙小伙伴在取到pv的值的时候直接存到缓存里,然后我直接用就可以,完全就不能出现这个问题,而且就算我自己存的话,也是相对繁琐的过程。(本方法未考虑接口返回慢的情况,请杠精少年不要太杠,不然下班跟我去搬砖)
PASS!
解决方法2:
我重新阅读了一下vue的官方文档,然后发现了这样一段话:
![7337d4ba01fe6d79d7c51cdfe6efa084.png](https://i-blog.csdnimg.cn/blog_migrate/860a58d57e2aea8dbab7e840f97eb1e2.jpeg)
在此之前我曾经想过watch方法来监听this.pvVersion这个变量,但是在页面重载的时候watch方法也是重新进行计算加载的,所以我们可以选择计算属性这个方法来尝试解决这个问题,并且官方文档给出的解释当中也提到了缓存,也就是如果有缓存的情况下computed会优先使用缓存,于是我在activity.vue里写下来computed
![5385d5a5d9a7326ac26c171b535e2a7d.png](https://i-blog.csdnimg.cn/blog_migrate/854314552657fb8113839863834b39e6.jpeg)
我怀着忐忑的心情,去手动刷新了页面,结果,本应该显示出来的dom元素,果然很给面子的显示了出来。
Computed属性的优点我试着来总结一下:1. 纯响应式,computed里面所用到的data一旦改变,整个computed的方法就回重新计算这个属性值2. 计算结果会被缓存起来,方便下次使用,如果下次调用的时候,其中的数据没有发生变化,则不会重新计算。
所以我们要善用computed属性去解决实际开发
本文转载于http://www.speedcode.cn/ArticleDetail?id=99补充本地存储 localStorage
created(){ //在页面加载时读取localStorage里的状态信息 localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg")))); //在页面刷新时将vuex里的信息保存到localStorage里 window.addEventListener("beforeunload",()=>{ localStorage.setItem("userMsg",JSON.stringify(this.$store.state)) }) }