vue单页应用如何在页面刷新时保留state状态数据
在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉。这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你
在 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))
-
})