Как создать шину Vue для глобальной обработки событий? - PullRequest
Новая
       21

Как создать шину Vue для глобальной обработки событий?

0 голосов
/ 17 мая 2018

Я использую Vue в среде Node / Webpack / Vue Router и пытаюсь настроить глобальный обработчик событий или шину.Но это не работает.Это отображается как неопределенный.Вот мои настройки:

main.js: 

//Declare event handler
Object.defineProperty(Vue.prototype, '$bus', {
  get () {
    return this.$root.bus
  }
})

//Declare app instance
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue 

<script>
export default {
  name: 'App'
  created: () => {
    console.log(this.$bus);
  }
}
</script>

console.log оператор возвращает undefined, что означает, что обработчик событий каким-то образом не передается в приложение.Я также попробовал следующее утверждение для объявления обработчика события:

main.js 

//Declare event handler
const eventBus = new Vue()
Vue.prototype.$bus = eventBus

Но это тоже не работает.

1 Ответ

0 голосов
/ 17 мая 2018

Это проблема с использованием функции стрелки.Хотя синтаксис () => {} выглядит лучше, чем function() {}, есть различие в том, что функция стрелки использует лексический контекст для this (откуда он был определен, а не из того места, где он был вызван, какой идентификаторв этом случае вам нужно), то есть this больше не является экземпляром Vue, поэтому вы не можете использовать this.$bus.Вы можете исправить это, заменив функцию стрелки обычной функцией, используя либо created: function() {..., либо краткую (но функционально эквивалентную) версию created() {...

Подробнее о различиях можно узнать, просмотрев статьи на es6, arrow functions, lexical scope, this context.

код main.js: 

import Vue from "vue";
import App from "./App";

Vue.prototype.$bus = new Vue();

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

где-то в app.js 

export default {
  name: "App",
  created() {
    console.log(this.$bus);
  }
};
...