解决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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
JavaScript实现select添加option
Jul 03 Javascript
简单实现js放大镜效果
Jul 24 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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 echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
JS实现div居中示例
2014/04/17 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python生成随机数的方法
2014/01/14 Python
python生成器表达式和列表解析
2016/03/10 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
教育局长自荐信范文
2013/12/22 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
成龙洗发水广告词
2014/03/14 职场文书
2014年底个人工作总结
2015/03/10 职场文书
公司车队管理制度
2015/08/04 职场文书
Golang日志包的使用
2022/04/20 Golang