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判断当前组件是否加载完成，加载完成执行页面框架 }