伏龙阁资源网

vue单页应用在页面刷新时保留状态数据的方法
站长资源 2024/11/27 佚名
2 0

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

然后在页面加载时再从localStorage里将数据取回来放到vuex里，于是王二在 App.vue 的 created 钩子函数里写下了如下代码：

localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
 
//考虑到第一次加载项目时localStorage里没有userMsg的信息，所以在前面要先做判断

这样就能比较圆满的解决问题了。

三、另一种解决方案

以上的解决方法由于要频繁地触发 localStorage.setItem 方法，所以对性能很不友好。而且如果一直同步vuex里的数据到localStorage里，我们直接用localStorage做状态管理好了，似乎也没有必要再用vuex。

这时候王二想，如果有什么方法能够监听到页面的刷新事件，然后在那个监听方法里将Vuex里的数据储存到localStorage里，那该多好。

很幸运，还真有这样的监听事件，我们可以用 beforeunload 来达到以上目的，于是王二在 App.vue 的 created 钩子函数里写下了如下代码：

  //在页面加载时读取localStorage里的状态信息
  localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
  
  //在页面刷新时将vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
    localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
  })

这样的话，似乎就比较完美了。

2018年03月27日补充：

王二在使用上述方法时，遇到了一个问题，就是：在开发阶段，如果在Vuex里添加新的字段，则新的字段不能被保存到localStorage里，于是上述代码修改如下：

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

以上这篇vue单页应用在页面刷新时保留状态数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接