解决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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
php修改数组键名的方法示例
2017/04/15 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
js日历功能对象
2012/01/12 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
深入理解Python 多线程
2020/06/16 Python
python 监控logcat关键字功能
2020/09/04 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
中国央视网签名寄语
2014/01/18 职场文书
个人授权委托书
2014/04/03 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
青岛导游词
2015/02/12 职场文书
初中生物教学随笔
2015/08/15 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python