解决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中的事件
Sep 23 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
js实现前端图片上传即时预览功能
Aug 02 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
破解Session cookie的方法
2006/07/28 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python列表切片操作实例总结
2019/02/19 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
函授大专自我鉴定
2013/11/01 职场文书
公司管理建议书范文
2014/03/12 职场文书
父母对孩子的寄语
2014/04/09 职场文书
大学班级计划书
2014/04/29 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
python如何正确使用yield
2021/05/21 Python
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android