Vue - передача данных между динамическими компонентами с помощью eventBus? - PullRequest
Новая
       16

Vue - передача данных между динамическими компонентами с помощью eventBus?

0 голосов
/ 27 декабря 2018

У меня есть 3 компонента в моем «поиске» (родительском) представлении; 'SearchForm' , 'ResultList' , 'DetailPage' .Я переключаюсь с SearchForm на ResultList, когда получаю ответ от бэкэнда. 

<keep-alive>
  <component v-bind:is="currentComponent"></component>
</keep-alive>

Когда ответ получен в моей 'SearchForm', я сохраняю его в searchBus; 

searchBus.$emit('searchIssue', response.data);

Затем в моем ResultList я хочу получить его снова и отобразить результаты; 

  mounted() {
    searchBus.$on(['searchIssue'], (search) => {
      this.table_items = search;
    });
  }

Я отображаю анимацию загрузки (также компонент), пока ответ не будет полностью загружен и не отобразится ResultList.

Из-за жизненного цикла Vue все работает, когда все компоненты отображаются в одном представлении, поскольку они уже прослушивают при обновлении шины.

Должен ли я выбрать другой подход? Например, используя v-show или передать ответ обратно в Parent и вставить его снова с помощью prop (Idk, если он будет работать, поскольку не все компоненты имеюттот же реквизит).

Есть ли способ использовать шину в любом случае? И как можно решить, собрав одну линейную иерархию и все еще скрывая нерелевантные компоненты?(SearchForm -> ResultList -> DetailPage)

1 Ответ

0 голосов
/ 27 декабря 2018

Должен ли я выбрать другой подход?

Я думаю, что наступает время для использования Vuex

В центрекаждое приложение Vuex - это магазин.«Магазин» - это, по сути, контейнер, в котором хранится состояние вашего приложения.Существуют две вещи, которые отличают хранилище Vuex от простого глобального объекта:

  • хранилища Vuex являются реактивными.Когда компоненты Vue извлекают из него состояние, они будут оперативно и эффективно обновляться при изменении состояния хранилища.
  • Вы не можете напрямую изменять состояние хранилища.Единственный способ изменить состояние магазина - это явно зафиксировать мутации.Это гарантирует, что каждое изменение состояния оставляет отслеживаемую запись, и позволяет использовать инструменты, которые помогают нам лучше понимать наши приложения.
...