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è)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁(yè)面監(jiān)聽(tīng)
- 解決Vue.js父組件$on無(wú)法監(jiān)聽(tīng)子組件$emit觸發(fā)事件的問(wèn)題
- 使用vue.js在頁(yè)面內(nèi)組件監(jiān)聽(tīng)scroll事件的方法
- vue.js項(xiàng)目 el-input 組件 監(jiān)聽(tīng)回車(chē)鍵實(shí)現(xiàn)搜索功能示例
- vue使用$emit時(shí),父組件無(wú)法監(jiān)聽(tīng)到子組件的事件實(shí)例
- 詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng)
- vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽(tīng)數(shù)據(jù)傳遞的方法
- Vue如何實(shí)現(xiàn)監(jiān)聽(tīng)組件原生事件
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue使用echarts圖表的詳細(xì)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家介紹了Vue.js中使用道具方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了Nuxt.js 靜態(tài)資源和打包的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。接下來(lái)通過(guò)本文給大家介紹vue中的計(jì)算屬性,需要的朋友可以參考下2018-09-09
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于Vue3中使用Pinia的相關(guān)資料,pinia是一個(gè)用于vue的狀態(tài)管理庫(kù),類(lèi)似于vuex,是vue的另一種狀態(tài)管理工具,文中介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要給大家分享了 vue中install方法介紹，vue提供install可供我們開(kāi)發(fā)新的插件及全局注冊(cè)組件等，感興趣的小伙伴請(qǐng)和小編一起進(jìn)入文章了解具體內(nèi)容吧2021-11-11
這篇文章主要介紹了vue制作抓娃娃機(jī)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)
WebRTC-streamer是一項(xiàng)使用簡(jiǎn)單機(jī)制通過(guò)WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實(shí)驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用
當(dāng)子組件使用setup后,父組件就不能像vue2那樣直接就可以訪(fǎng)問(wèn)子組件內(nèi)的屬性和方法,這個(gè)時(shí)候就需要在子組件內(nèi)使用defineExpose宏函數(shù)來(lái)指定想要暴露出去的屬性和方法,本文介紹vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用,需要的朋友可以參考下2024-05-05