大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要为大家展示了“父组件中vuex方法更新state子组件不能及时更新并渲染怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“父组件中vuex方法更新state子组件不能及时更新并渲染怎么办”这篇文章吧。
目前成都创新互联公司已为上1000家的企业提供了网站建设、域名、虚拟空间、网站托管、企业网站设计、玉龙网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
场景:
我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加载子组件,子组件在渲染的时候还没有获取到更新之后的related值,即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。
我的解决办法:
父组件像子组件传值,当父组件执行了获取页面详情的方法之后,state值related更新,然后传给子组件,子组件再进行渲染,可以正常获取到。
父组件代码:
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); }, } }{{ title }}
关注
- {{pubName}}
- {{authorName}} {{createAt|formatTime}}
责任编辑:{{editorName}}阅读全文
子组件related.vue
0">相关新闻{{item.title}}
打开唐人家 置顶 阅读 {{item.read}} {{item.createAt|formatTime}}
效果如图:
以上是“父组件中vuex方法更新state子组件不能及时更新并渲染怎么办”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!