2016-12-05 28 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)