解决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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
javascript表单正则应用
Feb 04 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
js监听html页面的上下滚动事件方法
Sep 11 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
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP调用其他文件中的类
2018/04/02 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
python实现用户管理系统
2018/01/10 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
巴基斯坦购物网站:Goto
2019/03/11 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
销售求职信范文
2014/05/26 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
实习科室评语
2015/01/04 职场文书