在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中...

  第一个是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...

 

vue2.x中请求之前数据显示以及vuex缓存的问题的更多相关文章

  1. Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  2. vue2.0s中eventBus实现兄弟组件通信

    在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通 ...

  3. vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...

  4. vue中请求本地的json数据

    为什么要请求本地的数据?模拟后台的请求数据,验证页面的逻辑是否存在问题,抛开后台提前开发等. 常用的说来有:jq的方式 约等于 axios的方式,vuex状态管理的方式 个人认为最好用的就是jq的方式 ...

  5. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  6. (转)ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法

    早上同事用PL/SQL连接虚拟机中的Oracle数据库,发现又报了"ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务"错误,帮其解决后,发现很多人遇到过这样的问 ...

  7. 关于Oracle报“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务”错误

    关于Oracle报“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务”错误原因:listener.ora中没有指定监听服务器名. 如下是解决思路: 尝试1.通过重启服务的方式启动数 ...

  8. Oracle几个基础配置问题:ORA-12154: TNS: 无法解析指定的连接标识符、ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务、ORA-12516 TNS监听程序找不到符合协议堆栈要求的可用处理程序

    问题1:ORA-12154: TNS: 无法解析指定的连接标识符 在一台服务器上部署了Oracle客户端,使用IP/SID的方式访问,老是报ORA-12154错误,而使用tnsnames访问却没有问题 ...

  9. ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法

    今天用PL/SQL连接虚拟机中的Oracle数据库,发现报了“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务”错误,也许你也遇到过,原因如下: oracle安装成功后,一直未停止 ...

随机推荐

  1. WinRT 中后台任务类的声明

    要实现后台任务,需要实现IBackgroundTask接口 public sealed class SimpleTask : IBackgroundTask { public void Run(IBa ...

  2. nodejs+express安装配置(Linux版本)

    在ubuntu下面,直接从源里面安装nodejs的话,此版本还行,但是相关的express等,会比较老. 采用源码安装,先下载nodejs的源码,然后三步: ./configure make make ...

  3. LeetCode135:Candy

    题目: There are N children standing in a line. Each child is assigned a rating value. You are giving c ...

  4. Transaction And Lock--唯一索引下INSERT导致的死锁

    背景: 曾经的一位同事问我:"数据库只有并发INSERT 操作,会造成死锁么?",我没有太多思考地回答"不会",但真的不会吗? 测试: --========== ...

  5. json--pyton中obj与json的互转,js中obj与json的互转

    json 解释:json是一种跨平台的通用的数据格式 python中对象(obj)与json之间的相互转换 1.对象(obj)转json格式的字符串 json.dumps(res) res = () ...

  6. mysql 数据库优化第一篇(基础)

    Mysql数据库优化 1. 优化概述 存储层:存储引擎.字段类型选择.范式设计 设计层:索引.缓存.分区(分表) 架构层:多个mysql服务器设置,读写分离(主从模式) sql语句层:多个sql语句都 ...

  7. 如何使用socket进行java网络编程(一)

    笔者进来遇到一个项目,一家公司的系统需要在完成自身业务逻辑的同时,接入到某银行的核心系统(这里准确说应该是前置机)进行一系列的账务处理,然后再将账务处理结果返回给该公司系统. 网络通信采用TCP协议. ...

  8. ng的点滴记录

    1,directive http://damoqiongqiu.iteye.com/blog/1917971/ 2,constructor  https://segmentfault.com/q/10 ...

  9. linux磁盘用满的两种情况

    首先查看分区的内存使用情况和inode使用情况 第一种情况,内存用完: 我们拿分区sdb5来做实验 查看内存使用情况和inode使用情况: 第二种情况:inode使用完 我们在该分区下创建很多空文件 ...

  10. Linux awk命令详解[备份]

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...