2016-12-05 32 views
2

我正在嘗試搭建Cordova的混合應用程序。我正在使用VueJS進行路由和AJAX請求。Vue無法收聽科爾多瓦事件

不幸的是我無法捕捉到Cordova的一些事件。甚至沒有deviceReady事件正在工作。
這裏是我的文件:

require('./bootstrap'); 


var Vue = require('vue'); 
var VueRouter = require('vue-router'); 

Vue.use(VueRouter); 

// Some components 
Vue.component('test', require('./Vue/components/test.vue')); 
Vue.component('mainnav', require('./Vue/partials/mainnav.vue')); 

// Route-components 
const Home = Vue.component('home', require('./Vue/pages/home.vue')); 
const Login = Vue.component('login', require('./Vue/pages/auth/login.vue')); 
const Register = Vue.component('register', require('./Vue/pages/auth/register.vue')); 
const notFound = Vue.component('notFound', require('./Vue/pages/404.vue')); 

// the routes 
const routes = [ 
    { path: '', component: Home }, 
    { path: '/', component: Home }, 
    { path: '/login', component: Login }, 
    { path: '/register', component: Register }, 
    { path: '*', component: notFound } 
]; 

const router = new VueRouter({ 
    mode: 'history', 
    routes // short for routes: routes 
}); 

const vueApp = new Vue({ 
    router, 
    mounted: function(){ 
     //alert('VueJS is ready!'); 
     document.addEventListener('deviceReady', this.onDeviceReady, false); 
    }, 
    methods: { 
     onDeviceReady: function() { 
      alert('Device is ready!'); 
     } 
    } 
}).$mount('#app'); 

也許是因爲該設備已準備就緒之前的Vue好了,我沒有得到消息。但我該如何處理?

我有機會向其他選項,例如無論是從Vue公司root-instance並從VUE組件vibration-plugin

export default { 
    data() { 
     return { 
      vibrateDuration: 5000, 
     }; 
    }, 
    methods: { 
     letsVibrate: function(){ 
      navigator.vibrate(this.vibrateDuration); 
     } 
    } 
} 

任何想法,我怎麼能趕上內的Vue裝置就緒事件?

回答

3

這可能是一個併發問題。嘗試設置一些簡單的信號量鎖,只有在兩者都開啓時纔會觸發某個功能(未經測試,但您明白了):

let deviceReady = false 
let vueMounted = false 

const vueApp = new Vue({ 
    router, 
    mounted: function(){ 
    vueMounted = true 
    if (deviceReady) vueApp.everythingReady() 
    }, 
    methods: { 
    everythingReady: function() { 
     alert('Vue is mounted and everything is ready') 
    } 
    } 
}).$mount('#app') 

document.addEventListener('deviceReady',() => { 
    deviceReady = true 
    if (vueMounted) vueApp.everythingReady() 
}, false)