解决vue单页面刷新后vuex中数据恢复初始值的问题

思路是页面关闭前将state的数据存储到浏览器缓存里,页面加载时再取出来存到state

//App.vue
created () {
  if (this.$getLocal("store")) {
    this.$store.replaceState(
      Object.assign({}, this.$store.state, this.$getLocal("store", "parse"))
    );
  }
  window.addEventListener("beforeunload", () => {
    this.$setLocal("store", this.$store.state);
  });
}

原文地址:https://www.cnblogs.com/ak-b/p/10525471.html

时间: 2024-08-26 21:49:36

解决vue单页面刷新后vuex中数据恢复初始值的问题的相关文章

nignx部署Vue单页面刷新路由404问题解决

在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题 说明: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({

解决vue单页面跳转返回后页面不刷新的问题

一.问题:在vue项目中通过location.href跳转到第三方页面,然后点击浏览器返回按钮回到自己的页面,用nginx起服务页面不刷新,在用node起服务中页面是正常刷新的: 二.产生该问题的原因:微信浏览器对页面进行缓存: 三.解决方案: 1 window.onpageshow = null; 2 window.onpageshow = function(event){ 3 location.reload() 4 } 5 window.location.href = 'https://ww

JSP中页面刷新后保留文本输入框的值

原本我想按照记忆中ASP的什么回调方法来做的,看了看网上的还是这样做方便多了: <input type="text" name="sname" value="${sname}"/> 看来还是处处都需要学习啊!

在不使用ssr的情况下解决Vue单页面SEO问题

先说明下,上一篇的方法存在作弊行为 孤陋寡闻了,以前没接触过这些,果然不能投机取巧啊 替代方法 将原来放入隐藏标签的内容放到骨架屏中用php预渲染 这样页面就会先展示重要的内容然后再显示其他部分 麻烦点的就是如果想要好看的话需要将相关的样式都粘过来 写在最后 虽然隐藏标签有涉及到作弊,但是内容没有太多关键字应该不会有太大影响 当然还是将内容优先展示出来是最好的 或许将来还能想到更好的方法 原文地址:https://segmentfault.com/a/1190000016959328 原文地址:

vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性

最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 后来在网上查找大神的解决方案如下: export default { name: 'App', created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.as

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态

解决vue单页路由跳转后scrollTop的问题

作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路由的时候做个处理,如下: import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); Vue.use(Router) export default new Router({ routes: [ { path: '/',

fullpage在vue单页面当中使用会出现的问题以及解决办法

在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpage也进行销毁,这样就可以重新初始化一个fullpage组件了. $.fn.fullpage.destroy('all'); 在beforeDestroy这个生命周期执行,就可以了

vue通过路由传值及在页面刷新后如何保存值

1.普通的路由跳转 方式一:通过routerLinkTo方式,转为a标签的跳转,to里面相当于a标签的href路径 如下: 方式二:通过this.$router.push方式: 如下: 2.带参数的路由跳转 通过动态参数:通过这种方式传递的参数在刷新后不会消失,但会显示在url路径上 router设置如下: 跳转方式: 接收路由参数方式: 通过params和query等方式:query和path为一个组合,params和name为一个组合,不同之处在于query方式会显示在url上,而param