Предотвратить эмиссию $ emit более одного раза в Vue - PullRequest
Новая
       11

Предотвратить эмиссию $ emit более одного раза в Vue

0 голосов
/ 21 ноября 2018

У меня есть вызов emit в моем проекте Vue для обновления результатов поиска, но вызов emit вызывается как минимум 4 раза, поскольку вызов emit определен в разных точках, поэтому данные посылаются вместе с ним и в других точках.это не так.

Я использую глобальную шину для выполнения emit. 

this.$root.bus.$emit('resetValuesInInfiniteLoader', filteredEntities);

this.$root.bus.$on('resetValuesInInfiniteLoader', function (filteredEntities) {});

Я пытался по-разному именовать вызовы, а также пытался использовать другую глобальную шину vue, нооба варианта не очень хорошо работали.Любая идея, как я могу сделать это эффективным способом, чтобы $ emit всегда вызывался только один раз?Как мне настроить его, чтобы всегда вызывать emit только один раз?Я также пытался использовать $ один раз, который не работал, или пытался уничтожить $ emit.Может кто-нибудь привести мне небольшой пример с скрипкой или так, может быть, чтобы я понял, как сделать это правильно?

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Я пошел с использованием vuex store, кажется, что намного проще общаться с любым компонентом в приложении, он имеет преимущество глобальной связи, но не имеет предупреждения об отправке нескольких действий, таких как события emit

0 голосов
/ 21 ноября 2018

Я обнаружил, что это так и есть, и чувствую, что есть некоторые проблемы с его использованием в разных местах.Насколько я понимаю, шина глобальных событий не рекомендуется в большинстве приложений, поскольку они могут привести к путанице.Рекомендуется использовать решение для управления состоянием, например, vuex.

Но в любом случае, просто пара моментов с приведенным выше кодом.Я не знаю, как вы создали свой автобус, но я знаю, как создать его следующим образом:

// main.js 

const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

Это создает его и делает его глобальным.Затем его можно запустить в компоненте или компонентах с помощью: 

<button @click="$bus.$emit('my-event')">click</button>

or

methods: {
    triggerMyEvent () {
      this.$bus.$emit('my-event', { ... pass some event data ... })
    }
  }

и прослушать: 

created () {
            this.$bus.$on('my-event', ($event) => {
                console.log('My event has been triggered', $event)
                this.eventItem = 'Event has now been triggered'
                //this.$bus.$off('my-event')
            })

        },

Я обнаружил, что иногда это работает.Я не знаю почему, но это будет работать, тогда это вызовет несколько событий, и я думаю, что это потому, что это не завершено или что-то еще.Вы можете заметить, что я прокомментировал это. $ Bus.off, который, конечно, останавливает это, но потом снова не работает.Так что я не знаю, о чем это все.

Итак, вы идете, полный не ответ, как, например, Да, я тоже это имел, Нет, я не могу это исправить.

...