Vuex刷新页面数据消失问题解决【Vue多页面跳转数据消失】

旧城等待， 2022-02-19 03:07 1318阅读 0赞

**问题说明：登陆成功后，后台返回token我设置到Vuex中去了，但是跳转到主页的时候token没了**  
  
*如果你还不知道怎么设置vue多页面共用Vuex看这里[Vue多页面共用一个Vuex][Vue_Vuex]*  
  
*我的跳转是用window.location.href，我也不知道为什么我的$router.push无法成功跳转*  
  
*window.location.href跳转会导致你的页面刷新，从而丢失Vuex的数据*

##### 如果你是单页面刷新导致Vuex数据丢失，只需要把下面的代码复制到App.vue里面就好了 #####

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))      
    	})     
       },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

##### 如果你是多页面（比如我这个登陆页面和主页面）只需要把上面的代码再copy一份到login.vue就好了 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

如果你是在使用nuxt的时候遇到了这个问题，看这里 :  [https://blog.csdn.net/Tomwildboar/article/details/97616705][https_blog.csdn.net_Tomwildboar_article_details_97616705]

[Vue_Vuex]: https://blog.csdn.net/Tomwildboar/article/details/89292948
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220219/252d0ca060224a8ebcfbd64e97e07f1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220219/dbcf2b3d756847e5821b2b5d67d66a32.png
[https_blog.csdn.net_Tomwildboar_article_details_97616705]: https://blog.csdn.net/Tomwildboar/article/details/97616705