VueはCordovaイベントを聞くことができません

Question

Cordovaでハイブリッドアプリを構築しようとしています。私は、ルーティングとAJAXリクエストにVueJSを使用しています。

残念ながら私は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の準備が整う前に、デバイスの準備ができているので、たぶん私はメッセージを得ることはありません。しかし、どうすればこれを処理できますか？

私は、他のオプションへのアクセスを持っている例えばvibration-plugin両方のVue root-instanceからとVUEのコンポーネントから：私はVueの内のデバイスreadyイベントをキャッチすることができますどのように

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

任意のアイデア、？

Answer 1

おそらく並行性の問題です。両方がオンになっているときにのみ関数をトリガーする単純なセマフォー・ロックを設定してみてください（テストされていませんが、アイデアが得られます）。

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)