解决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 相关文章推荐
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
js面向对象编程总结
Feb 16 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 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新手上路(十一)
2006/10/09 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python实现图像的垂直投影示例
2020/01/17 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
2015年行风建设工作总结
2015/05/15 职场文书