父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法


Posted in Javascript onApril 25, 2018

场景:

我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加载子组件,子组件在渲染的时候还没有获取到更新之后的related值,即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。

我的解决办法:

父组件像子组件传值,当父组件执行了获取页面详情的方法之后,state值related更新,然后传给子组件,子组件再进行渲染,可以正常获取到。

父组件代码:

<template>
 <div id="newsDetails">
  <mt-header title="详情">
   <router-link to="/" slot="left">
    <mt-button icon="back"></mt-button>
   </router-link>
  </mt-header>
  <div class="details clearfloat">
   <h1 class="titleFont">
    {{ title }}
   </h1>
   <div class="clearfloat sourceWrap">
    <ul class="sourceFont">
     <li v-if="(pubNews==true)">
      <span class="source">{{pubName}}</span>
     </li>
     <li>
      <span class="authorName">{{authorName}}</span>
      <span class="time">{{createAt|formatTime}}</span>
     </li>
    </ul>
    <span v-if="(pubNews==true)" class='btnFollow' @click="follow">关注</span>
   </div>
   <div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}">
    <div v-html="content"></div>
    <div class="editor" v-if="editorName">责任编辑:{{editorName}}</div>
   </div>
   <div class="contentToggle" @click="contentStatus=!contentStatus" v-if="contentStatus">阅读全文</div>
   <Related :related="related"></Related>

<!--重点是这里 父组件向子组件传值-->
 </div> </div> </template>

import { Toast } from 'mint-ui';
 import {mapState} from 'vuex'
 import Related from './Related.vue'
 import moment from 'moment';
 export default{
  name:"NewsDetails",
  components:{
   Related,
  },
  data(){
   return {
    id:this.$route.params.id,
    topicType:"news",
    contentStatus:false,
    curHeight:0,
    bodyHeight:5000,
    hotCommentScrollTop:0
   }
  },
  created(){
   this.id=this.$route.params.id;
   this.fetchData();
   moment.locale('zh-cn');
  },
  mounted(){
   setTimeout(()=>{
    this.contentToggle();
   },500)
  },
  watch: {
   '$route'(to,from){
    this.id=this.$route.params.id;
    this.fetchData();
   }
  },
  computed: {
   ...mapState({
    title: state => state.newsDetails.title,
    authorName: state => state.newsDetails.authorName,
    pubNews: state => state.newsDetails.pubNews,
    pubName: state => state.newsDetails.pubName,
    editorName: state => state.newsDetails.editorName,
    createAt: state => state.newsDetails.createAt,
    content: state => state.newsDetails.content,
    myFavourite: state => state.newsDetails.myFavourite,
    related: state => state.newsDetails.related,
   })
  },
  filters:{
   formatTime(time){
    return moment(time).fromNow();
   },
  },
  methods:{
   fetchData(){
    this.$store.dispatch('getDetails',this.id);
   },
   follow(){
    Toast('登录后进行关注');
    this.$router.push("/login");
   },
   contentToggle(){
    this.curHeight=this.$refs.bodyFont.offsetHeight;
    if(parseFloat(this.curHeight)>parseFloat(this.bodyHeight)){
     this.contentStatus=true;
    }else{
     this.contentStatus=false;
    }
//    this.hotCommentScrollTop=this.$refs.hotComment.height;
    console.log(this.hotCommentScrollTop);
   },
  }
 }

子组件related.vue

<template>
  <div v-if="lists.length>0">
    <div class="tagTitle"><span>相关新闻</span></div>
    <div class="listItem" v-if="(item.type=='little')" v-for="(item,index) in lists" :to="{name:'details',params:{id:item.id}}" :key="index" @click="browserDetection()">
     <div class="listImg1">
      <!--<img :src="{lazy==loaded?item.thumb[0]:lazy==loading?'../../assets/images/little_loading.png':lazy==error?'../../assets/images/little_loading.png'}" alt="" v-lazy="item.thumb[0]">-->
      <img :src="item.thumb[0]" alt="" v-lazy="item.thumb[0]">
     </div>
     <div class='titleBox1'>
      <p class="listTitle">{{item.title}}</p>
      <div class="titleInfo">
       <span class="openApp">打开唐人家</span>
       <span v-if="item.top==true" class="toTop">置顶</span>
       <!--<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
       </svg>-->
       <span class="like">阅读 {{item.read}}</span>
       <span class="time">{{item.createAt|formatTime}}</span>
      </div>
    </div>
   </div>
  </div>
</template>
<script>
 import {mapActions, mapState, mapGetters} from 'vuex'
 import moment from 'moment'
 export default{
  data(){
   return {
    lists: [],
    id:this.$route.params.id,
   }
  },
  props:{
    related:Array  //重点是这里
  },
  created(){
   moment.locale('zh-cn');
  },
  /*computed: {
   ...mapState({
    related: state => state.newsDetails.related,
   })
  },*/
  filters:{
   formatTime(time){
    return moment(time).fromNow();
   },
  },
  methods:{
  },
  watch: {
   related (val) {
    this.lists = val;
   },
   '$route'(to,from){
    this.id=this.$route.params.id
   }
  }
 }
</script>

效果如图:

父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

总结

以上所述是小编给大家介绍的父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
You might like
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
prototype1.4中文手册
2006/09/22 Javascript
jquery 学习笔记一
2010/04/07 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python实现吃苹果小游戏
2020/03/21 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
大型活动策划方案
2014/01/12 职场文书
党员民主评议总结
2014/10/20 职场文书
军训通讯稿范文
2015/07/18 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
创业计划书之花店
2019/09/20 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL