vue单页应用如何在页面刷新时保留state状态数据?

在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉。这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你

App.vuecreated 钩子函数里写下如下代码:

  • //在页面加载时读取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))

  • })