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

this.$state.commit在页面刷新后失去价值

this.$state.commit是Vue.js框架中的一个方法,用于提交一个mutation来修改应用的状态。在页面刷新后,由于浏览器的刷新行为会导致页面重新加载,Vue.js的应用状态也会被重置,此时之前通过this.$state.commit提交的mutation对应的状态修改将会丢失。

为了解决这个问题,可以考虑使用持久化存储技术来保存应用的状态,以便在页面刷新后能够恢复之前的状态。常见的持久化存储技术包括:

  1. Cookie:可以通过设置Cookie来存储少量的应用状态数据,但是由于Cookie的大小限制和安全性考虑,适合存储较小的状态数据。
  2. LocalStorage和SessionStorage:这两个API提供了在浏览器端存储大量数据的能力。LocalStorage用于持久化存储数据,即使页面关闭后数据也会一直存在;而SessionStorage用于临时存储数据,当页面关闭后数据会被清除。可以将应用的状态数据序列化为JSON字符串,然后存储到LocalStorage中,在页面加载时再从LocalStorage中读取并反序列化为应用的状态。
  3. IndexedDB:IndexedDB是浏览器提供的一种高级的客户端存储数据库,可以存储大量结构化数据。可以将应用的状态数据存储到IndexedDB中,在页面加载时再从IndexedDB中读取。
  4. 后端存储:将应用的状态数据存储到后端服务器上,可以使用数据库或者其他存储技术来保存数据。在页面加载时,通过网络请求将之前保存的状态数据从服务器获取并应用到应用中。

需要注意的是,使用持久化存储技术来保存应用的状态会增加额外的开发和维护成本,同时也需要考虑数据安全性和隐私保护的问题。因此,在决定使用哪种持久化存储技术时,需要综合考虑应用的需求和实际情况。

对于腾讯云相关产品,可以考虑使用腾讯云的对象存储(COS)服务来存储应用的状态数据。腾讯云对象存储(COS)是一种安全、高可靠、低成本的云存储服务,适用于存储大量非结构化数据,可以将应用的状态数据以对象的形式存储在COS中。具体的产品介绍和使用方法可以参考腾讯云对象存储(COS)的官方文档:腾讯云对象存储(COS)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Vuex的实战使用

    ,select组件是一个公共组件里面的,你选择的时候你的uuid是不可以直接给到当前页面的,即时给到他,别的配置怎么办呢?...说一下我开始的想法,我开始是准备使用缓存做,每次用户切换的时候我都将最新的uuid放到缓存里面,但是有一个问题解决不了就是别的页面怎么实时监听这个值改变了呢?...解释一下上面的代码:首先我们页面加载的时候也就是created的阶段将最新的uuid也就是store里面的全局变量的值拿到,有人说你拿到, 为什么还要写下面的,那么问题就来了,如果用户在当前页面直接切换了机器的...uuid,那么他没有刷新页面,也没有切换页面,这个时候created是不会执行的,是不是,那么最新的uuid怎么更新呢?...这个问题可能有人会问,但是其实很简单,因为用户不刷新页面的时候created是不执行的,那么我们就拿不到最新的uuid进行数据的更新,所以要写监听的函数。 问题4: 为什么使用this.

    82810

    移动端上拉加载和下拉刷新的vue插件

    做一个简单的移动端展示项目,后台分页前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //...不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from ‘...隐藏下拉刷新的状态 this....可以data中的mescrollUp项中进行底部没有更多数据时的提示信息,'END'及'加载中...'...手机上回出现卡顿问题 进行滚动的这个容器样式中添加这个属性: -webkit-overflow-scrolling:touch; 填加了这个兼容会导致定位为position:fixed的失去效果,

    4.8K20

    requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?

    五一节之前和一网友讨论前端技术时,对方提到vue、vue-route如果配合requirejs应用。...当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究给他一个回复。本是一天的研究却被我搞成了研究了一周,这拖延症。。。 闲话少数,进入正题 一、示例代码说明 ?...route:测试子路由的组件 title:就是一个简单的显示文字的组件 app.js:核心类,提供vue的创建、以前modules组件加载的方法等 chart.js:模拟的一个业务模块 index.html:页面文件...this.$store.state.router) return null; return this....createComponet:会根据调用传入的名称modules文件夹中找出对应的js和html文件,然后调用acquire加载组件。

    2.5K100

    图表列表性能优化:可视化区域内最小资源消耗

    但是,如果页面定时自动刷新,不可见区域内的刷新完全是浪费前后端的资源。...图表也比较复杂 刷新页面操作:切换右侧目录列表、搜索确定、查询搜索、面板手动刷新、面板设置定时自动刷新 刷新图表事项:父子图、关联图、组合图(图表套图表) 尺寸调整事项:浏览器页面尺寸调整、侧边栏收起、...来看看你的项目存是否也可能存在以下几个致命问题: 多图表的列表,多用户设置定时自动刷新,服务器请求特别多,资源消耗严重(如果限制视窗内刷新,十屏滚动,资源就是减少90%) 图表列表数据过大时,页面卡死,...echarts实例,项目内存占用巨大,甚至内存泄露,页面崩溃 直接开干版 容器滚动,通知容器内组件,需要重新渲染;组内再调用组件内刷新。...对于刷新事件,组件自己储备上次加载的参数,接手刷新事件,自己觉得干啥。

    2.3K30

    奇奇怪怪的兼容性Bug

    IOS 不支持this....都是刷新当前页面的方法,Vue 写H5页面时,用 this.router.go(0); 方法刷新当前页面苹果手机失效,安卓、pc、开发工具等都可以改用 *window.location.reload...应用场景:一般来说埋点数据请求遇到这个场景可能比较多,项目需要对信息编辑页内容进行数据缓存,由于操作会到其他分包,所以基于vueRouter的keepalive便失去了效果,诚然,这种情况使用localStorage...它提供了一个keepalive属性,保证不管发送请求的页面关闭与否,请求都会持续直到结束。不过上传数据的限制是64 KB。...window.addEventListener(‘onbeforeunload’, { fetch('/api', { method: 'POST', body: data, keepalive: true }); } 这个方法可以刷新或标签页关闭前把请求发出去

    1.1K10

    小技巧-优雅实现页面刷新(vue)

    前几天项目经理提了个需求要实现点击刷新按钮实现页面的局部刷新,刷新页面使用谷歌的重新加载不是就可以了何必要去自己开发呢?结果自己尝试了一番发现只能实现全局的刷新,局部刷新还是比较捉急。...vue项目中使用this....$router.push()方法来跳转不同路径,如果跳转相同的路径的话会发现页面并没有刷新,而是histry栈中添加了一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。...转化 将要刷新的路由和刷新的路由之间通过一个桥梁(作为过渡)来连接。 ? 将路由的信息和参数全部都传给"桥梁",当其跳转的一瞬间获取到参数和路由信息跳转到原来的路由。...this.

    1.1K20

    vue页面刷新_vue强制重置组件

    vue页面刷新 首先我们都知道vue属于单页面应用,默认境况下是不会触发刷新页面操作的,所以这个时候就需要我们通过事件来触发reload()来达到刷新操作 接下来我就为大家介绍三种刷新页面的方法 1...(location.href) 2. this....} }, mounted () { this.reload() }, } 如果你这么写,你打开页面你会惊奇的发现...,刷新之后是不是又会重新加载一下页面呢,然后再触发,加载…无穷无尽 那就没有办法解决嘛,有,既然我们找到了原因,那解决的办法也是有的 解决思路:通过判断来处理第一次刷新,后续将不再执行,也就是我们第一次执行的时候为...router = new VueRouter({ mode: 'hash', base: process.env.BASE_URL, routes }) export default router 然后我们需要刷新页面这样来写

    2.3K10

    vue通过路由实现页面刷新

    vue 开发微信商城项目, 需求如下: 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回...$off('judge') this.$root.Bus.$off('refreshDetail') this.$root.Bus.$off('clearAll') this....$off('upDataCart') next() }, 同样的,物理返回时无法触发购物车的created方法,则无法触发bus的$on方法 归根结底,物理返回时刷新页面则可以处理此问题...$router.replace({ name: 'cart' })// 处理返回刷新问题 this....replace到当前页,再跳转到订单页面,返回可以自动刷新了, 这个方法并不理想,如果您有更好的方法,欢迎分享 ---- 有专门的方法处理此问题,购物车页面,添加如下代码即可 // 销毁组件,返回刷新

    1.3K20

    Vue中实现路由跳转传参

    path后面跟上对应的值传递形成的路径:/path/参数值// params传参数————类似post,浏览器地址栏中不显示参数this....id=1,刷新页面参数id还在,会一直保留,也就是说,query传参刷新页面可以保存。另外,非重要性的可以这样传, 密码之类等重要数据还是要使用params,这样数据安全。...params类似post,跳转之后页面 url后面不会拼接参数,也就是说地址栏不显示参数名称id,但是有参数的值,如果刷新页面id会消失,也就是说,params传参刷新不会保存(除非在路由规则里配置对应参数...$route.query获取,页面跳转的时候,可以地址栏看到请求的参数名以及参数值,刷新页面,参数会一直保留。params传参:params相当于post请求,只能name,通过this....项目中跳转到外部链接方法项目文件中,如果是vue页面中的内部跳转,js中用this.

    13210

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

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

    4.3K10
    领券