父组件中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 相关文章推荐
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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
如何写php程序?
2006/12/08 PHP
php 高性能书写
2010/12/11 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
Python中的rfind()方法使用详解
2015/05/19 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python 字典访问的三种方法小结
2019/12/05 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
党校培训自我鉴定范文
2014/04/10 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
关于Python使用turtle库画任意图的问题
2022/04/01 Python
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL