解决vue2.x中数据渲染以及vuex缓存的问题

2024-10-04 20:29:06

最近在学习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...

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vuex和前端缓存的整合策略详解

如何存放或更新缓存? 缓存数据来源是预知的,我们可以预先定义哪些 mutation 是缓存相关的. 我们期望这个过程更自然一点,通过某种变化自动映射,使以后不管缓存类别增加还是减少都能修改极少的代码来应对变化. Vuex的插件可以拦截 mutations,借助这个机制,我们可以制定一种策略化的规则. 可以规定,所有需要更新缓存的 mutationType 都要符合这种格式:module-type-cacheKey,非缓存的 mutationType 格式为 module-type. 那么就可以拦
详解基于vue的移动web app页面缓存解决方案

现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为后退时恢复之前的页面笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的
关于Vue实现组件信息的缓存问题

当我们在开发vue的项目过程中,避免不了在路由切换到其他component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载. 在app.vue里 <keep-alive> <router-view></router-view> </keep-alive> 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果. 那么我们给部分组件加上,实现方法如下: 在app.vue里 <!-
详解vue之页面缓存问题(基于2.0)

比如有一个列表页面,然后列表每项都有一个详情,之前用vue1.x的时候,页面缓存基本没有什么问题. 在vue2.0中出现了列表页面是每次都重新加载数据,但是详情页面却只在第一次加载的时候调用数据,如果返回到列表再进入详情那么页面是不会重新渲染页面,可能是新手吧,这个问题困扰了我很久,一直没有办法解决-- 根据vue-router的官方文档所说, watch: { // 如果路由有变化,会再次执行该方法 '$route': 'fetchData' } 按照这样写了,但是页面还是没有渲染 . . .
解决vue2.x中数据渲染以及vuex缓存的问题

最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记. 在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户会先看到静态的内容(就是页面固定写死的),过一会才会有数据回来渲染,这体验是很差的,其实解决办法也很简单,就是用vue里的 v-if 来判断请求的数据是否返回... <div class="container&quo
解决Vue2.0中使用less给元素添加背景图片出现的问题

在使用less在Vue.js中给元素添加背景图片时或者你会出现这样的写法 background-image: url('../img/' + @{bg_url} + '2x.png'); 或者这样 background-image: url('../img/' + @bg_url + '2x.png'); 这样 background-image: url(../img/@{bg_url}2x.png); 还有这样 background-image: url(../img/@bg_url2x.p
利用js实现Vue2.0中数据的双向绑定功能

Object.defineProperty了解语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对象. prop 要定义或修改的属性的名称 descriptor 要定义或修改的属性描述符 obj和prop很好理解比如我们定义一个变量为 const o = { name:'xbhog' } 其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor descriptor 目标对象属性的一些特征
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

vuex数据改变,组件中页面不渲染相信许多vuex新手都会遇到这样的问题: vuex数据更新后,插件中使用数据的地方没有更新这样的代码 data() { return { tableData: this.$store.state.AdminInfo }; } 然后在 template 中使用 tableData <el-table :data="tableData" class="tablePst"> <el-table-column labe
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

前几天在工作的过程中,在数据渲染的时候,发生了swiper那一部分的轮播图不在滚动,手动滑动也没有效果.一直感觉数据开始渲染,是不是数据渲染的时候,并没有生成swiper的节点呢.后来第一感觉就是把控制swiper轮播的函数放在初始化事件中去, 放在初始化事件中去: 结果并没有达到自己的理想状况,后来放在数据获取之后哪里在进行轮播事件的发生, swiper终于可以滑动了.其实这也不能算是一个什么大的问题点,只是单纯的想记录一下.以后在遇到相似的问题,更多的应该是从数据实现的先后来出发.这次就当做
Vuex拿到state中数据的3种方式与实例剖析

目录 Ⅰ.Vuex 简介: 1.Vuex 是什么? 2.Vuex 的图例讲解: 3.Vuex 的配置过程: Ⅱ.如何引入并使用 Vuex : Ⅲ.实例剖析在 App.vue 中使用 state 的过程: Ⅳ.小结: Ⅰ.Vuex 简介: 1.Vuex 是什么? 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式: 而所谓状态就是指:组件中所维护的数据); (简而言之:就是状态管理,解决复杂组件数据通信,状态共享:) 2.Vuex 的图例讲解: 其一.对 Vue Component
解决vue2中使用axios http请求出现的问题

使用axios处理post请求时,出现的问题解决默认情况下: axios.post(url, params).then(res => res.data); 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status code 404 我们需要实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 于是得出
关于vue2强制刷新,解决页面不会重新渲染的问题

问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: 运用 this.$forceUpdate(); //强制刷新,解决页面不会重新渲染的问题例: <template> <div> <el-card> <ul class="list-style-none title-list"> <li v-for="item in titleList&
解决vue.js 数据渲染成功仍报错的问题

最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-upload class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload" :on-success="handleUploadSuccess" :on-error=

解决vue2.x中数据渲染以及vuex缓存的问题

相关推荐

随机推荐