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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
js自定义瀑布流布局插件
May 16 Javascript
js中如何完美的解析数据
Mar 18 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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生成静态页面详解
2006/12/05 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
python获取网页状态码示例
2014/03/30 Python
使用Python生成url短链接的方法
2015/05/04 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python离线安装外部依赖包的实现
2020/02/13 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
酒店员工检讨书
2014/02/18 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
六查六看六改心得体会
2014/10/14 职场文书
2015年教务工作总结
2015/05/23 职场文书
年终工作总结范文
2019/06/20 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技