Vue无法收听Cordova活动

Question

我正在尝试用Cordova构建一个混合应用程序。我正在使用VueJS进行路由和AJAX请求。

不幸的是，我无法抓住一些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 vibration-plugin和vue组件的root-instance：

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

任何想法，我如何在Vue内捕获设备就绪事件？

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)

Answer 2

试试：

vueApp = new Vue({ 
   //...
    methods: { 
          onDeviceReady: function() {
               alert('Device is ready!');
            } 
       } 
});

document.addEventListener(
      'deviceready', 
       vueApp.onDeviceReady
);