快捷導(dǎo)航

vue-cli監(jiān)聽(tīng)組件加載完成的方法

更新時(shí)間：2018年09月07日 09:31:29 作者：oceanheaven_web

今天小編就為大家分享一篇vue-cli監(jiān)聽(tīng)組件加載完成的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在使用vue-cli開(kāi)發(fā)項(xiàng)目時(shí)遇到過(guò)一個(gè)問(wèn)題，要求是頁(yè)面組件全部加載完成后再執(zhí)行某個(gè)函數(shù)，給上代碼參考，方法可能有點(diǎn)笨，好在實(shí)現(xià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è)面框架
}

以上這篇vue-cli監(jiān)聽(tīng)組件加載完成的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在Vue中獲取組件聲明時(shí)的name屬性方法
今天小編就為大家分享一篇在Vue中獲取組件聲明時(shí)的name屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
詳解vue 組件
這篇文章主要介紹了詳解vue 組件的相關(guān)知識(shí)，文中講解非常細(xì)致，代碼供大家參考學(xué)習(xí)，感興趣的朋友可以了解下
2020-06-06
jdk1.8+vue elementui實(shí)現(xiàn)多級(jí)菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實(shí)現(xiàn)多級(jí)菜單功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
vue使用echarts實(shí)現(xiàn)立體柱形圖
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
詳解vue之mixin的使用
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11
Vue項(xiàng)目使用CDN優(yōu)化首屏加載問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目使用CDN優(yōu)化首屏加載問(wèn)題,本文以vue、vuex、vue-touter為例，給大家介紹處理流程，需要的朋友可以參考下
2018-04-04
Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過(guò)程中，需要注意文件的格式和轉(zhuǎn)換方式，以及插件和組件的使用方法和注意事項(xiàng)，需要的朋友可以參考下
2023-05-05
Vue混淆與還原的實(shí)現(xiàn)
混淆是一種有效的保護(hù)措施,可以加密和壓縮代碼,使其難以被理解和修改,本文將介紹Vue混淆的概念以及如何進(jìn)行還原,感興趣的可以了解一下
2023-12-12
前端vue-cropperjs實(shí)現(xiàn)圖片裁剪方案
這篇文章主要為大家介紹了前端vue-cropperjs實(shí)現(xiàn)圖片裁剪方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue3造輪子之打包構(gòu)建配置二級(jí)目錄方式
這篇文章主要介紹了Vue3造輪子之打包構(gòu)建配置二級(jí)目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07