vue缓存的keepalive页面刷新数据的方法


Posted in Javascript onApril 23, 2019

用到这个的业务场景是这样的:

a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条,

点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据

实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储;2. 用路由参数带过去;3. 用兄弟组件传值

由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这个方法首先排除

用本地存储的时候,如果不加回退也会吧之前存的历史记录给带过来,所以最终选用了第三种方法

由于a页面需要缓存,所以用到了路由页面的缓存

router.js

{path: '/a',name: 'a',component: a,meta: {keepAlive: true}},

App.vue

<template>
 <div id="app">
  <keep-alive>
    <router-view v-if="$routemetakeepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$routemetakeepAlive"></router-view>
 </div>
</template>

由于用到了keepalive, 所以页面在再次加载的时候是不会触发created而是会触发activated的

所以接收数据,重置数据要写到activated方法下

a页面接收

更改用Vue.set()方法

调用方法:Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

activated(){
    let that = this
    Self$on('detailShow',(data)=>{ // 接收
      if(!dataisEdit){ // 是新增还是编辑--这个是在跳转的时候带过去的--新增/编辑页面也会根据这个显示内容有所区别
        thataddParamspush(data)
        thataddParams = Arrayfrom(new Set(thataddParamsSubsidyInfos)) // 为避免重复去个重
      }else{



 // thataddParams[thateditIndex] = data // 刚开始想通过直接修改,后来发现不行,因为页面是有缓存的,显示的还是未修改之前的
        Vueset(thataddParams,thateditIndex,data) // 用set方法修改数据
      }
    })

  },

b页面提交(新增/编辑)

submit(){
    if(!thisdetailValidate()){ // 这个是表单校验,如果不通过不然提交
     return;
    }else{
     Self$emit('detailShow',thisaddParams) // 事件分发
     this$routerback();

    }
   }

vue 缓存的keepalive页面刷新数据的话,这个主要还是用到了Vue.set( target, key, value )方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 #Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 #Javascript
Vue infinite update loop的问题解决
Apr 23 #Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 #Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 #Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 #Javascript
vue项目首屏加载时间优化实战
Apr 23 #Javascript
You might like
php中adodbzip类实例
2014/12/08 PHP
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
理解 JavaScript EventEmitter
2018/03/29 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python实现合并两个数组的方法
2015/05/16 Python
Python实现二叉搜索树
2016/02/03 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python super()方法原理详解
2020/03/31 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
super()与this()的区别
2016/01/17 面试题
社区中秋节活动方案
2014/01/29 职场文书
租车协议书范本
2014/04/22 职场文书
村道德模范事迹材料
2014/08/28 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书