vue-cli监听组件加载完成的方法

发布时间：2020-12-16 23:37:38 所属栏目：百科来源：网络整理

导读：在使用vue-cli开发项目时遇到过一个问题，要求是页面组件全部加载完成后再执行某个函数，给上代码参考，方法可能有点笨，好在实现了功能。 1、安装vuex 2、在项目目录下找到store.js文件 //监听nav模块加载完 const m_classifyone = { state: { count:0 },mu

在使用vue-cli开发项目时遇到过一个问题，要求是页面组件全部加载完成后再执行某个函数，给上代码参考，方法可能有点笨，好在实现了功能。

1、安装vuex

2、在项目目录下找到store.js文件

//监听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、在子组件中

//数据请求完成后
this.$post(address.addr+controll.mallcontroll+'/getMallHome').then(message => {

//这里使用箭头函数是为了不改变this指向
this.$store.commit('increment');
})
}

4、通过store判断子组件数据加载完成

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监听组件加载完成的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!