vue单页应用在页面刷新时保留状态数据的方法-创新互联

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

目前创新互联建站已为近千家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、迎江网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、问题

现在产品上有个需求：单页应用走到某个具体的页面，然后点击刷新后，刷新的页面要与刷新前的页面要保持一致。

这时候就需要我们保存刷新之前页面的状态。

二、一种解决方案

在这个Vue单页应用中，王二是用Vuex作为状态管理的，一开始王二的思路是将Vuex里的数据同步更新到localStorage里。

即：一改变vuex里的数据,便触发localStorage.setItem 方法，参考如下代码：

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex)
 
function storeLocalStore (state) {
  window.localStorage.setItem("userMsg",JSON.stringify(state));
}
 
export default new Vuex.Store({
  state: {
    username: "王二",
    schedulename: "标题",
    scheduleid: 0,
  },
  mutations: {
    storeUsername (state,name) {
      state.username = name
      storeLocalStore (state)
    },
    storeSchedulename (state,name) {
      state.schedulename = name
      storeLocalStore (state)
    },
    storeScheduleid (state,id) {
      state.scheduleid = Number(id)
      storeLocalStore (state)
    },
  }
})

文章名称：vue单页应用在页面刷新时保留状态数据的方法-创新互联
地址分享：http://bzwzjz.com/article/cscdhj.html