Vuex刷新时数据会消失，解决⽅法
在vue项⽬中⽤vuex来做全局的状态管理，发现当刷新⽹页后，保存在vuex实例store⾥的数据会丢失。
原因：
因为store⾥的数据是保存在运⾏内存中的，当页⾯刷新时，页⾯会重新加载vue实例，store⾥⾯的数据就会被重新赋值初始化
解决思路：
将state的数据保存在localstorage、sessionstorage或cookie中，这样即可保证页⾯刷新数据不丢失且易于读取。
1. localStorage: localStorage的⽣命周期是永久的，关闭页⾯或浏览器之后localStorage中的数据也不会消失。localStorage除⾮主动删
除数据，否则数据永远不会消失。
2. sessionStorage:sessionStorage的⽣命周期是在仅在当前会话下有效。sessionStorage引⼊了⼀个“浏览器窗⼝”的概
念，sessionStorage是在同源的窗⼝中始终存在的数据。只要这个浏览器窗⼝没有关闭，即使刷新页⾯或者进⼊同源另⼀个页⾯，数据依然存在。但是sessionStorage在关闭了浏览器窗⼝后就会被销毁。同时独⽴的打开同⼀个窗⼝同⼀个页⾯，sessionStorage也是不⼀样的。
3. cookie:cookie⽣命期为只在设置的cookie过期时间之前⼀直有效，即使窗⼝或浏览器关闭。存放数据⼤⼩为4K左右，有个数限制（各
浏览器不同），⼀般不能超过20个。缺点是不能储存⼤数据且不易读取。sessionstorage和localstorage
由于vue是单页⾯应⽤，操作都是在⼀个页⾯跳转路由，因此sessionStorage较为合适，原因如下：
1. sessionStorage可以保证打开页⾯时sessionStorage的数据为空；
2. 每次打开页⾯localStorage存储着上⼀次打开页⾯的数据，因此需要清空之前的数据。
vuex的数据在每次页⾯刷新时丢失，是否可以在页⾯刷新前再将数据存储到sessionstorage中呢，是可以的，事件可以在页⾯刷新前触发，但是在每个页⾯中监听beforeunload事件感觉也不太合适，那么最好的监听该事件的地⽅就在app.vue中。
1. 在app.vue的created⽅法中读取sessionstorage中的数据存储在store中，此时⽤vuex.store的⽅法，替换store的根状态
2. 在beforeunload⽅法中将store.state存储到sessionstorage中。
vuex中state数据的修改必须通过mutation⽅法进⾏修改，因此mutation修改state的同时需要修改sessionstorage，问题倒是可以解决但是感觉很⿇烦，state中有很多数据，很多mutation修改state就要很多次sessionstorage进⾏修改，既然如此直接⽤sessionstorage解决不就⾏了，为何还要⽤vuex多此⼀举呢？
  vuex可以实现数据响应，⽽sessionstorage是不可以的，我们使⽤vuex 的主要⽬的是为了各个组件之间的传参，通过数据改变视图。⽽sessionstorage是做不到这⼀点的。

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