页面刷新vuex数据消失问题解决方案,vuex刷新状态丢失

　　本文介绍了如何解决vue页面刷新vuex中状态数据丢失的问题，并通过实例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。

　　页面刷新后，原始vuex中的状态会发生变化。如果可以在页面刷新前保存状态信息，然后在页面重新加载时将值赋给状态，就可以解决问题了。

1、localstorage

　　您可以使用localstorage来保存信息。

　　【在一个组件中添加如下钩子函数。例如，在App.vue中]

　　已创建(){

　　//页面加载时读取localStorage中的状态信息。

　　if(local storage . getitem( store ){

　　这个。$ store . replace state(object . assign({ }，this。$store.state，JSON . parse(local storage . getitem( store )))

　　}

　　//刷新页面时，将vuex中的信息保存到localStorage。

　　window . addevent listener( before unload ，()={

　　localStorage.setItem(store ，JSON.stringify(this。$store.state))

　　})

　　}

　　注意：

　　这个。$store.replaceState()用于替换存储的信息(状态合并)。

　　Object.assign(目标.source)将source的值赋给target，如果有重复的数据，就覆盖它。在哪里.意味着可能有多个来源。

　　JSON.stringify()用于将对象转换成JSON。

　　JSON.parse()用于将JSON转换成一个对象。

　　注意：

　　如果有两个组件，调用localstorage的值时可能会出现问题。

　　如下所示，Main.vue中的每次页面刷新都会触发localstorage操作。

　　start localstorage中没有值。用户通过Login.vue组件进入Main.vue组件并刷新页面后，localStorage会记录与当前用户相关的状态信息。

　　直接在浏览器中将路径切换到Login.vue。当另一个用户通过Login.vue进入Main.vue时，此时获取的是前一个用户的信息，所以肯定会出问题(我遇到的一个坑，大致就是这个意思)。

　　暴力的解决方法是直接在Login.vue中删除前一个用户缓存的信息

　　此时，localStorage没有最后一个用户的信息。

　　【Login.vue】

　　已创建(){

　　//在进入屏幕之前，删除保存在主页面上的状态信息。

　　local storage . remove item(“store”)

　　}

　　然后只使用localStorage在主组件刷新时记录信息。

　　【Main.vue】

　　已创建(){

　　//页面加载时读取localStorage中的状态信息。

　　if(local storage . getitem( store ){

　　这个。$ store . replace state(object . assign({ }，this。$store.state，JSON . parse(local storage . getitem( store )))

　　}

　　//刷新页面时，将vuex中的信息保存到localStorage。

　　window . addevent listener( before unload ，()={

　　localStorage.setItem(store ，JSON.stringify(this。$store.state))

　　})

　　}

2、sessionStorage

　　您还可以使用sessionStorage来保存信息。

　　【在一个组件中添加如下钩子函数。例如，在App.vue中]

　　已创建(){

　　//加载页面时读取sessionStorage中的状态信息

　　if(session storage . getitem( store ){

　　这个。$ store . replace state(object . assign({ }，this。$store.state，JSON . parse(session storage . getitem( store )))

　　}

　　//刷新页面时将vuex中的信息保存到sessionStorage。

　　window . addevent listener( before unload ，()={

　　sessionStorage.setItem(store ，JSON.stringify(this。$store.state))

　　})

　　}

3、localstorage 与 sessionStorage 的区别

　　(1)客户端使用1)localstorage和sessionStorage来存储数据。(2)localStorage没有过期时间，sessionStorage的声明周期就是浏览器的生命周期。(3)浏览器关闭时，sessionStorage的数据会被清空，而localStorage的数据只要不是被代码故意删除或手动删除，就会永久保存。(4)如果要清除localstorage的数据。localStorage.removeItem(key)清除一段数据

　　localStorage.clear()清除所有数据。

　　以上是边肖为您介绍的解决vue页面刷新vuex中状态数据丢失的方法。希望对你有帮助。非常感谢您对我们网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。