在使用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監聽組件加載完成的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答