Как правильно реализовать передачу данных между не связанными друг с другом компонентами в vue3?

Question

[Andy Koshman]

Теоретический вопрос, в проекте vue3 есть три компонента:
- src/components/TheMain.vue
- src/components/TheBasketPanel.vue
- src/layouts/TheHeader.vue

В компоненте TheMain.vue у меня находятся массив basket.value, который я бы хотел передать в компонентTheAuthPanel.vue являющийся дочерним компонентом TheHeader.vue. Как можно реализовать передачу данных не используя store? По сути я хочу передать массив с данными о товаре в корзину, но исходя из структуры столкнулся с чем то иным нежели props/emit. Гугля, нашел варианты типа provie/inject, но в данном случае не подходит. Я понимаю что можно просто сохранить в localStorage и вытащить данные в нужном компоненте, но можно ли как то по другому сделать? Вообще в целом какую информацию можно почитать по поводу передачи данных между несвязанными друг с другом компонентами?

Answer 1

[Даниил]

Если я правильно понял,то кроме использования Vuex (store) или localStorage,один из способов - это использование глобальной шины событий (Event Bus). В данном случае, можно использовать шину событий для передачи данных между компонентами без необходимости прямой связи через props/emit или store.
https://v3.vuex.vuejs.org/ru/
https://webformyself.com/event-bus-dlya-obmena-svo...

Comments

[Andy Koshman]

Спасибо, значит четвертого не дано, буду смотреть)

[Антон Антон]

в сторону vuex смотреть не надо, надо смотреть в сторону https://pinia.vuejs.org/

[Антон Антон]

Andy Koshman, четвертое - это разделяемое состояние без отдельного стора https://vuejs.org/guide/scaling-up/state-managemen...

[Дмитрий Кузнецов]

А разве EventBus (как показано в ссылке) не убрали во Vue3? Читал когда-то, что такое убрали.

Answer 2

[Aetae]

Если ты не используешь SSR, то тебе достаточно просто reactive/ref объекта, чтоб получить эрзац-стор, тупо:

// где-нибудь 
export const basket = reactive([]); // или ref([]) по вкусу. 
// везде где надо
import { basket } from './...'

Реактивность будет прекрасно работать.

Почему кто-то использует специальные store если можно делать так? Потому что сторы учитывают работу в режиме SSR, а также позволяют удобную отладку в случае множества запутанных связей.
Вам я бы тоже рекомендовал использовать таки store - только pinia, а не vuex. Не вижу причин его не использовать.

По поводу EventBus: с одной стороны новичку её использовать категорически не рекомендуется, т.к. работа со store куда удобнее, очевиднее и надёжнее. Однако и совсем отрицать её использование тоже не следует, шина отлично подходит для случаев когда мы имеем дело именно с событиями, а не изменением состояния. Т.е. послать какой-нить notification или лог - самое оно, использовать для изменения basket, как в вашем случае - нет.

Comments

[Andy Koshman]

Спасибо большое за подробное объяснение текущей ситуации. За подобный случай:

// где-нибудь 
export const basket = reactive([]); // или ref([]) по вкусу. 
// везде где надо
import { basket } from './...'

даже не догадался, хотя в принципе очевидное явление. По поводу pinia, на данном этапе обучения мне нравится вымучивать компоненты props/emit без использования стора)