解决vue2.x中数据渲染以及vuex缓存的问题


Posted in Javascript onJuly 13, 2017

最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记。

在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中...

第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户会先看到静态的内容(就是页面固定写死的),过一会才会有数据回来渲染,这体验是很差的,其实解决办法也很简单,就是用vue里的 v-if 来判断请求的数据是否返回... 

<div class="container" id="app" v-cloak>
   <div v-if='moneyInMsg.uuid'>
     <in-account-msg :money-in-msg="moneyInMsg"></in-account-msg>
   </div>
 </div>

这里的  v-if = 'moneyInMsg.uuid' 就是来判断数据有没有请求回来,如果请求回来就让他显示,没有请求到数据,就让他loading,这样体验就会好很多。在这里还需要注意的是,v-if判断的数据源,是数据返回的字段,如果两个字段只能存在其一的话,可以v-if ='a || b' 来判断数据是否成功的返回;还要注意的一点是,不能直接在组件里用v-if判断,也不能直接在根标签里判断,直接嵌套一个div就可以解决,并不影响样式,只做数据是否正常返回的显示作用;

第二个就是在使用vuex时,有数据缓存;我遇到的情况是,在列表页点击进入详情页,返回到列表页,在进入另一个详情页的时候,数据会显示之前的数据,同时页面还在loading(接口返回的数据比较慢),过一会数据返回的时候,才重新渲染页面。可能是自己对vuex理解的不够深入,没有在vuex基础上解决这个问题。虽然曲折的解决了这个问题,但是不够zhuang,但是解决了问题,后期再做优化。

在之前解决的方案中,是进入页面的时候,重新刷新页面,重新请求数据,代码如下:

export const refresh = (title) => {
 document.title = title;
 let iframe = document.createElement('iframe');
 iframe.src = require('./mm.jpg');
 iframe.setAttribute('style', 'display:none;');
 let loadFn = function () {
     iframe.removeEventListener('load', loadFn);
     document.body.removeChild(iframe);
     console.info('Page Title IS ' + title);
     iframe = null;
     loadFn = null;
 }
 document.body.appendChild(iframe)
 iframe.addEventListener('load', loadFn);
}

但是没有达到预期的效果,依然会出现上面的情况... 丫的,抓狂了...(被别人催的感觉真的不爽...)

百度啊,google啊,都没有遇到这种情况的?找到一个,还是提问的,没有回答的,好吧,还是靠自己。自己动手,丰衣足食啊...

思路是,定义一个参数status为false,当数据没有请求回来,就不显示,也是用上面的方式来判断,一直loading(请求失败,去掉loading),当数据返回的时候,让status为true;使用$nextTick来更新数据...

贴上自己部分的代码作为参考:

<template>
  <div v-if='status && order.name'>
    //页面展示的数据
  </div>
</template> 
<script>
  export default{
  data(){
    return {
       status:false
      }
    },
    created(){
     var _this = this;
      this.setDd({res =>{
        _this.$nextTick(function(){
          _this.status= true
        });  
      }})
    },
    computed:{
      ...mapGetters({//getter获取的数据})
    },
    methods:{
      ...mapActions(['setDd']) //获取数据的方法
    }
  }   
</script>

处理的方式比较丑陋...,但是实现了想要的效果;这里注意一点就是v-if的判断问题。(v-if='status && order.name')这个用了并且,目的是有数据返回,才能让他显示,如果没有数据,会显示静态的值,数据都为underfind...

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

Javascript 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 #Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 #Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 #Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 #Javascript
js实现图片上传预览原理分析
Jul 13 #Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 #Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
Vue实现导航栏菜单
2020/08/19 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Python logging设置和logger解析
2019/08/28 Python
django admin 添加自定义链接方式
2020/03/11 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
上海中网科技笔试题
2012/02/19 面试题
通用C#笔试题附答案
2016/11/26 面试题
校园之声广播稿
2014/01/31 职场文书
司马光教学反思
2014/02/01 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
护士个人年终总结
2015/02/13 职场文书
python基础之类方法和静态方法
2021/10/24 Python
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL