Vuex 刷新后数据丢失问题 Typescript】的更多相关文章

问题描述:Vuex保存的数据在页面刷新后会全部丢失清除 问题解决方案:使用sessionstorage进行保存,在页面刷新时保存至sessionStorage,页面在加载时再进行填充   (另有vuex-persistedstate  插件可以解决这个问题,本人是使用typescript,使用‘vuex-module-decorators’注册vuex各module,不知如何使用该插件,就没有尝试过,想试试的可以去搜索,很多这方面文章) 在App.vue 中 import { UserModul…
一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage.Session Storage.Index DB等.这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储.具体选择哪一个就根据你实际需求来选择. 二.解决方案 在客户端存储数据: HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限…
何为Vuex?用处是什么?为什么刷新丢失? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 --官方回答 组件化开发作为前后端分离模式的一大特点但也伴随组件之间的通信的问题,当项目庞大.数据共享场景多.多层组件通信时,这时它就应该出现了,它为开发者提供简便的数据共享中心,不用再去纠结组件之间怎么传递数据了 刷新页面数据没了,咋那么怪异???作为共享数据管理,不应该是一直存在的么?刚开始时至…
1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页面中,相当于我们定义的全局变量,刷新之后,里面的数据就会恢复到初始化的状态.比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加? 2.使用场景 vuex存取值一般都是放在computed计算属性中,但是一刷新页面的数据就没了 3.思…
刷新页面时候将state数据保存到localStorage里面: export default { name: 'App', created () { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("sto…
前段时间,做了个官网项目,客户要求将首页的域名后面的参数去除干净,然后就把#去掉了,一转脸,客户让去掉子页面地址栏上的参数,这很棘手,因为子页面的内容是根据子页面地址栏上的参数而定的,如果要去掉这些参数,怎么在跳转页面时也可以拿到上一个页面所存的变量呢?于是,想起了vuex,但是vuex有一个问题是,一旦刷新页面,vuex中的值会丢失,那怎么解决呢?就是在存变量值的同时在session中也存一份数据,在取变量值时,如果刷新了页面,变量值肯定就不存在了,这时我么你可以判断vuex中的变量是否有值,…
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据sessionstorage的特性,做一下各个方法的封装: const ls = window.sessionStorage; export default { getItem(key) { try { return JSON.parse(ls.getItem(key)); } catch (err) { ret…
最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 后来在网上查找大神的解决方案如下: export default { name: 'App', created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.as…
最近接手了一个项目,前端后端都要做,之前一直在做服务端的语言.框架和环境,前端啥都不会啊. 突然需要前端编程,两天速成了JS和VUE框架,可惜还是个半吊子.然后遇到了一个困扰了一整天的问题.一直调试都没办法解决. 最后找到一个极好的解决思路解决了问题.https://blog.csdn.net/guzhao593/article/details/81435342 遇到的问题: 由于vue框架设计出来的APP实际上全部设置在同一个html上,跳转是通过路由实现的, 所以,有的控件并不会在跳转时刷新…
**问题背景:**页面刷新后,vuex中的数据丢失.这是因为:js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的.进行刷新页面的操作,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage.Session Storage.Index DB等.这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储.具体选择哪一个就根据你实际需求来选择. 解决思路:在项目中,登录后,通过登录接口会获取到很多用户…
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一个问题是:我在一个组件(例如登录组件页面)中登录了后,其它页面要怎么获取和响应这个变化?(就是这么小白,/(ㄒoㄒ)/~~) 这个答案就是使用vuex啦,在中文版的文档中有这样一句话: 而这里的计算属性就是我们的伟大的computed属性啦~ (至于前面的通过mutation之类的把数据存入vuex…
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一个问题是:我在一个组件(例如登录组件页面)中登录了后,其它页面要怎么获取和响应这个变化?(就是这么小白,/(ㄒoㄒ)/~~) 这个答案就是使用vuex啦,在中文版的文档中有这样一句话: 而这里的计算属性就是我们的伟大的computed属性啦~ (至于前面的通过mutation之类的把数据存入vuex…
在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状态 mutations:{ changepcId(state, _pcid){ state.pcid = _pcid; }, changepostList(state, _postList){ state.postList = _postList; Cookies.set('postList', _…
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态…
在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中:下面是我在mutation中写的方法: 同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改:但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用 利用…
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一个问题是:我在一个组件(例如登录组件页面)中登录了后,其它页面要怎么获取和响应这个变化?(就是这么小白,/(ㄒoㄒ)/~~) 这个答案就是使用vuex啦,在中文版的文档中有这样一句话: 而这里的计算属性就是我们的伟大的computed属性啦~ (至于前面的通过mutation之类的把数据存入vuex…
最近用MJRefresh上拉刷新时遇到一个问题,就是上拉刷新后,tableview会瞬间滑到最底部,用户还要往回翻才能看到新刷出来的数据,体验十分不好.查了很久没找到原因,最后发现在refreshview停止动画前,我代码里调用了两次tableview reloaddata,抱着尝试的心理,我改了代码结构,删除了一个tableview reloaddata,结果还真被我蒙对了!原因不明,可能是tableview的一个小bug,也可能是我的 MJRefreshView版本太老,是时候更新一下这个第…
第一: 在你刷新前保存所在位置的行号 procedure XXXClass.LockPositionEx;begin DisableControls; FHistoryRecNo := 0; FHistoryIndexName := EmptyStr; if Active then begin if IndexName <> EmptyStr then FHistoryIndexName := IndexName; IndexName := EmptyStr; if not IsEmpty t…
      在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点.这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到这个节点上.       查询了好久终于找到一个可行的方案,就是通过节点的path来记录节点的位置信息,然后通过path从root节点开始逐层展开,直到最后一个节点. 完成的代码如下: 首先是extjs3.x版本中的方法: //获取选中的节点 var node = tr…
问题: 有一个list,点击item时会做一些事情,然后重新加载数据,此时希望点击重新刷新后item还在原来的位置,而不是跳转到开头. 实现如下: 1.listview添加监听setOnScrollListener,记住滚动时的第一个可见列表项id, //记住上一次滚动时的位置信息 lv.setOnScrollListener(new OnScrollListener(){ @Override public void onScroll(AbsListView view, int firstVis…
在页尾加 <script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {  }); </script> 因为 add_endRequest 是updatepanel刷新后执行的最后一个事件了, 可以把重新加载的内容包装成一个函数,然后在最后这个事件里执行包装后的方法达到重新加载.…
//cookies存储select选定值,防止刷新后没了 window.onload = function () { var cooki = document.cookie; if (cooki != "") { cooki = "{\"" + cooki + "\"}"; cooki = cooki.replace(/\s*/g, "").replace(/=/g, '":"').re…
<template> <div id="leftMenuList"> <el-row> <el-col :span="24"> <el-menu :default-active="currentMenu" active-text-color="#ffd04b" router> <el-menu-item index="/homePage"&g…
概述 这几天学习koa2,有一些心得,记录下来,供以后开发时参考,相信对其他人也有用. 起因 这几天学习koa2,写的代码执行时有一个奇怪的bug:明明能够返回数据,却有时正常返回数据,有时偏偏给你返回404,很头疼.问传统后端,都不懂koa:上网查资料,怀疑是bodyparser的bug,于是换了另一个koa-body中间件来解析post请求,还是会出现这个bug. 直到我去github上面查别人koa2 + mongoose的代码,才发现是异步的问题.总结起来解决方案是这样的:既然koa2里…
ztree :http://www.ztree.me/v3/main.php 项目中用到了这个插件,刚好也有需求 在页面刷新后,保存开始的展开.折叠状态, 其实 dtree: http://www.destroydrop.com/javascripts/tree/  原生就支持了,不想折腾的,可以直接用这个, 我不使用 dtree 是因为 以前项目中使用过 ztree ,且自定义了皮肤,so .... 简单说下,实现原理 1. 在 onCollapse , onExpand 里面使用 cooki…
最近同事在交接工作时,发现有几个schedule job没有执行成功,我这边给看了下,其中一个是由于数据库迁移,调用dblink的host主机IP在tnsnames中没有变更导致,还有一个是无法视图的报错,即报错信息如下: 一.错误日志 通过查看schedual job报错日志,具体报错信息如下 ORA-12034:"SCOTT"."USER_TABLE" 上的实体化视图日志比上次刷新后的内容新ORA-06512: 在 "SYS.DBMS_SNAPSHOT…
vue错误提示 Cannot read property 'beforeRouteEnter' of undefined,刷新后跳到首页 因为vue-router版本太高了,我vue用的是2.3.4,vue-router用了2.7就出现了上面的情况,将vue-router版本降到2.3.1 这个问题就不会复现了npm i vue-router@2.3.1…
这是之前我发的一个贴子问题描述:http://q.cnblogs.com/q/53469/…
什么是cookie? Cookies虽然一般都以英文名呈现,但是它还是有一个可爱的中文名“小甜饼”.Cookies是指服务器暂存放在你的电脑里的txt格式的文本文件资料,主要用于网络服务器辨别电脑使用.比如浏览网站时,Cookies 记录下来你输入的一些资料和信息.再访问同一个网站,就会依据Cookie里的内容来判断使用者,送出特定的信息内容给你. Cookies有什么作用? 首先,它在使用上更便捷,比如你之前在我们新浪微博上进行登陆过用户名.下次,再登陆时,系统就可以默认你的用户名甚至是密码,…
IE11浏览器中的My97日历控件刷新后无法打开问题解决办法   IE11浏览器中的My97日历控件刷新后无法打开问题解决办法:(谷歌浏览器下正常.IE11失效) 解决办法:1:找到WdatePicker.js2:将$crossFrame:true 改为$crossFrame:false.3:重启服务,刷新页面发现OK. PS:WdatePicker的引用建议使用绝对路径 引用自:http://blog.csdn.net/dove_knowledge/article/details/530973…