首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vuex页面刷新的数据丢失问题

Vuex页面刷新的数据丢失问题 1、问题描述 2、解决方案:使用sessionStorage   在实际项目中,经常会遇到多个组件需要访问同一个数据的情况,且都需要根据数据的变化作出响应,而这些组件之间可能并不是父子组件这种简单的关系...1、问题描述 Vuex用起来确实很舒服,但是今天碰到了个问题,就是我将JWT和一些权限字符串使用store保存的时候,刷新页面之后这些值就没了,由于我后端集成了SpringSecurity,所以每次请求我都会去验证...JWT,如果刷新页面的话,后续请求头中就没有token,就会导致报错。   ...state.token = token } }, actions: { }, modules: { } })   刚登录进去还是有值的,如下图:   刷新页面之后...actions: { }, modules: {} }) 这里为了直观,我只留下token和menuList两个state   重新登录查看Vuex中的state 此时再刷新页面

1.8K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据。今天经过总结,解决了这个问题。...通过了一下几种情况进行传值: 通过路由params传参 通过路由query传参 通过vuex 1.通过params传参 先在路由path里那个组件需要传递参数,定义一个参数,用于组件传递,params刷新页面数据会丢失...1.通过query传参 路由传值有两种方式,params和query,params传值刷新页面是要消失的,然而query却不会,两者的区别就在于query会把传递的参数显示在url地址中,就像下面这样...这样无论怎么刷新,数据都不会丢失。 3.通过vuex取  最好办的就是通过vuex来存和取你的数据,把你的数据都存在vuex中,然后那个组件需要,直接调用vuex的getters来获取数据就行。...以上是路由传参和vuex存值、传值的时候刷新页面数据消失的解决办法。喜欢的可以关注一下。

    2.8K20

    html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结

    JS页面 如何实现刷新指定DIV。。。 其他DIV不刷新 将innerHTML所在的方法用一个单独的函数写出来,然后需要时再调用。...js实现进入页面刷新在继续进行js的功能 js实现,进入页面刷新一下,然后在执行之后js代码需要完成的工作 js或者jquery实现固定时间刷新页面 js怎么写2秒后再刷新当前页面 设置定时2秒后执行刷新...JS刷新当前页面的几种方法总结 reload 方法,该方法强迫浏览器刷新当前页面。...true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) replace 用js操作 怎样 实现刷新当前页面 而 不改变请CSS布局HTML小编今天和大家分享头按F5...可以 就是不知道用js 或jquery怎样实现的F5功能 或者有其他方法实现 js刷心当前页面,你说的不闪应该是所有页面不会有变白的一瞬间,那就根据需要对页面某一块区域用AJAX处理,刷新的时候就只会改变

    13.8K30

    js页面刷新或关闭时弹框消失_js刷新页面如何保留页面内容

    onbeforeunload 事件属性   定义:在即将离开当前页面(刷新或关闭)时执行 JavaScript,例如: window.onbeforeunload = function...; } Jetbrains全家桶1年46,售后保障稳定   用法:onbeforeunload 事件在即将离开当前页面刷新或关闭)时触发。...该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 “确定要离开此页吗?”。该信息不能删除。...触发于: 关闭浏览器窗口 通过地址栏或收藏夹前往其他页面的时候 点击返回,前进,刷新,主页其中一个的时候 点击 一个前往其他页面的url连接的时候 调用以下任意一个事件的时候:click,document...当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。 重新赋予location.href的值的时候。

    11.8K40

    Vuex数据页面刷新丢失问题解决方案

    用Vue做项目开发很久了,对于vuex能用、会用,但是因为状态脱离页面刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还是要使用...Vuex去处理(真香),但是刷新丢失的问题,的确叫人头大。...最近闲下来,我们来研究下怎么干掉这个问题~ 不大了解Vuex的同学,可以先去官网溜溜 由于Vuex的数据是存储在内存中的,相当于memory cache,当页面刷新的时候内存被清空重载新内容,原来的数据就丢了...js垃圾回收机制? 2、SessionStorage怎么做到会话期缓存? 3、session机制怎么回事? 4、http的无状态?状态保持?客户端保持?服务端保持?

    2.8K30

    vuex + sessionstorage 解决vue项目刷新页面空白数据丢失

    /assets/js/ls.js' 然后就是使用了, 一、setItme: ls.setItem('test', true); ls.setItem('test2', '字符串'); let test3...所以,意味着用户进入页面或者刷新页面,这个值就会变成我自己设定的100000.那么第一个限制条件就完成了。...这样,如果这两个条件同时成立,那就能断定他是刷新了。 那么这个状态值需要在一开始没有,页面初始化后才存在,且页面刷新丢失。 什么数据这么神通广大?!那就是sessionstorage设置的数据。...,这时应该清除或者重置一下,不然页面一进来数据还存在,这里条件就会成立,会变成死循环,展示上就是页面一直跳转一直刷新。...TeamID=' + newTeamID; } } 这样解决了刷新页面空白的问题,重定向重新请求数据 但是如果为了解决部分数据丢失的问题,也可以直接将数据实现存在sessionstorage内

    2.9K20

    vue-router 路由传参,刷新页面参数丢失

    name,路径用 name,路径用 name , 用 path 会获取不到;如果在路由配置中没有添加 /:id 即 path: ‘detail’,url 中不会显示 id,在详情页还是可以拿到参数 id,但刷新后参数丢失...如果在路由中设置了params参数 /:id,但是在跳转的时候没有传递参数,会导致页面没有内容或跳转失败,可在后面加 ?代表这个参数是可选的,即 /:id?...传递的参数是对象或数组 还有一种情况就是,如果通过 query 的方式传递对象或数组,在地址栏中会被强制转换成 [object Object],刷新后也获取不到对象值。...router 以上 params 和 query 传参方式对比: 通过 $router.push 的 params + name 传参,若路由中没有设置params参数,参数不会拼接在路由后面,但是页面刷新参数会丢失...console.log(this.id) } } 详见:动态路由匹配 路由组件传参 此外,还可以通过把参数存在 sessionStorage 或 localStorage 中来解决页面刷新参数丢失的问题

    4.3K10
    领券