欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年09月07日 09:31:29   作者：oceanheaven_web  
今天小編就為大家分享一篇vue-cli監(jiān)聽組件加載完成的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在使用vue-cli開發(fā)項目時遇到過一個問題，要求是頁面組件全部加載完成后再執(zhí)行某個函數(shù)，給上代碼參考，方法可能有點笨，好在實現(xiàn)了功能。

1、安裝vuex

npm install vuex --save

2、在項目目錄下找到store.js文件

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

 //監(jiān)聽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ù)請求完成后
this.$post(address.addr+controll.mallcontroll+'/getMallHome').then(message => {

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

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

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

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

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

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

相關(guān)文章

  • vue使用echarts圖表的詳細方法

    vue使用echarts圖表的詳細方法

    這篇文章主要為大家詳細介紹了vue使用echarts圖表的詳細方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-10-10
  • Vue.js中使用道具方法demo

    Vue.js中使用道具方法demo

    這篇文章主要為大家介紹了Vue.js中使用道具方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-12-12
  • Nuxt.js 靜態(tài)資源和打包的操作

    Nuxt.js 靜態(tài)資源和打包的操作

    這篇文章主要介紹了Nuxt.js 靜態(tài)資源和打包的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue中的計算屬性實例詳解

    vue中的計算屬性實例詳解

    模板內(nèi)的表達式非常便利，但是設(shè)計它們的初衷是用于簡單運算的。接下來通過本文給大家介紹vue中的計算屬性,需要的朋友可以參考下
    2018-09-09
  • Vue中this.$router.push參數(shù)獲取方法

    Vue中this.$router.push參數(shù)獲取方法

    下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • Vue3中使用Pinia的方法詳細介紹

    Vue3中使用Pinia的方法詳細介紹

    這篇文章主要給大家介紹了關(guān)于Vue3中使用Pinia的相關(guān)資料,pinia是一個用于vue的狀態(tài)管理庫,類似于vuex,是vue的另一種狀態(tài)管理工具,文中介紹的非常詳細,需要的朋友可以參考下
    2024-01-01
  • vue中install方法介紹

    vue中install方法介紹

    這篇文章主要給大家分享了 vue中install方法介紹，vue提供install可供我們開發(fā)新的插件及全局注冊組件等，感興趣的小伙伴請和小編一起進入文章了解具體內(nèi)容吧

    2021-11-11
  • vue制作抓娃娃機的示例代碼

    vue制作抓娃娃機的示例代碼

    這篇文章主要介紹了vue制作抓娃娃機，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • 使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)

    使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)

    WebRTC-streamer是一項使用簡單機制通過WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實驗,下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用

    vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用

    當(dāng)子組件使用setup后,父組件就不能像vue2那樣直接就可以訪問子組件內(nèi)的屬性和方法,這個時候就需要在子組件內(nèi)使用defineExpose宏函數(shù)來指定想要暴露出去的屬性和方法,本文介紹vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用,需要的朋友可以參考下
    2024-05-05

最新評論