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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
Vue实现简单的跑马灯
May 25 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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
星际流派综述
2020/03/04 星际争霸
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php实现分页显示
2015/11/03 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
浅谈开发eslint规则
2018/10/01 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
python Pexpect模块的使用
2020/12/25 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
临床医学应届生求职信
2013/11/06 职场文书
教师的实习鉴定
2013/12/15 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
网吧管理制度范本
2015/08/05 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python