vue-cli监听组件加载完成的方法
更新时间：2018年09月07日 09:31:29 作者：oceanheaven_web
今天小编就为大家分享一篇vue-cli监听组件加载完成的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在使用vue-cli开发项目时遇到过一个问题，要求是页面组件全部加载完成后再执行某个函数，给上代码参考，方法可能有点笨，好在实现了功能。
1、安装vuex
npm install vuex --save
2、在项目目录下找到store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//监听nav模块加载完
const m_classifyone = {
state: {
count:0
},
mutations: {
increment (state) {
state.count++
}
}
}
const store = new Vuex.Store({
modules: {
a: m_classifyone,
b: m_classifyonepage,
c:currentpage
}
})
export default store;
3、在子组件中
created(){
//数据请求完成后
this.$post(address.addr+controll.mallcontroll+'/getMallHome').then(message => {
//这里使用箭头函数是为了不改变this指向
this.$store.commit('increment');
})
}
4、通过store判断子组件数据加载完成
mounted(){
//通过store判断当前组件是否加载完成，加载完成执行页面框架
var count = 0;
let countfn = function(count){
if(count>0){
//子组件加载完成清除计时器，调用方法
clearInterval(st)
pagef.pageFramefn();
}
}
let st = setInterval(e => {
count = this.$store.state.a.count;
countfn(count)
})
//通过store判断当前组件是否加载完成，加载完成执行页面框架
}
以上这篇vue-cli监听组件加载完成的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了详解vue 组件的相关知识，文中讲解非常细致，代码供大家参考学习，感兴趣的朋友可以了解下2020-06-06
这篇文章主要介绍了jdk1.8+vue elementui实现多级菜单功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
这篇文章主要为大家详细介绍了vue使用echarts实现立体柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家介绍了vue之mixin的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了Vue项目使用CDN优化首屏加载问题,本文以vue、vuex、vue-touter为例，给大家介绍处理流程，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了如何在Vue中实现docx/xlsx/pdf等类型文件预览功能,在实现过程中，需要注意文件的格式和转换方式，以及插件和组件的使用方法和注意事项，需要的朋友可以参考下2023-05-05
混淆是一种有效的保护措施,可以加密和压缩代码,使其难以被理解和修改,本文将介绍Vue混淆的概念以及如何进行还原,感兴趣的可以了解一下2023-12-12
这篇文章主要为大家介绍了前端vue-cropperjs实现图片裁剪方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue3造轮子之打包构建配置二级目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论