使用vue-cli怎么監(jiān)聽(tīng)組件加載完成

使用vue-cli怎么監(jiān)聽(tīng)組件加載完成？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

1、安裝vuex

npm install vuex --save

2、在項(xiàng)目目錄下找到store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

 //監(jiān)聽(tīng)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(){

//數(shù)據(jù)請(qǐng)求完成后
this.$post(address.addr+controll.mallcontroll+'/getMallHome').then(message => {

//這里使用箭頭函數(shù)是為了不改變this指向
this.$store.commit('increment');
}) 
}

4、通過(guò)store判斷子組件數(shù)據(jù)加載完成

mounted(){
//通過(guò)store判斷當(dāng)前組件是否加載完成，加載完成執(zhí)行頁(yè)面框架
var count = 0;

let countfn = function(count){
if(count>0){

//子組件加載完成清除計(jì)時(shí)器，調(diào)用方法
clearInterval(st)
pagef.pageFramefn();
}
}
let st = setInterval(e => {
count = this.$store.state.a.count;
countfn(count)
})
//通過(guò)store判斷當(dāng)前組件是否加載完成，加載完成執(zhí)行頁(yè)面框架
}

看完上述內(nèi)容，你們掌握使用vue-cli怎么監(jiān)聽(tīng)組件加載完成的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！