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