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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
js实现跨域的多种方法
Dec 25 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
python删除服务器文件代码示例
2018/02/09 Python
python递归全排列实现方法
2018/08/18 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
浅析python中while循环和for循环
2019/11/19 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
软件工程师面试题
2012/06/25 面试题
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
公司岗位说明书
2015/10/08 职场文书
高中数学课堂教学反思
2016/02/18 职场文书