Vue Router. Как обмениваться данными с компонентом в роуте без использования Vuex?

Question

[bormor]

Вариант получить параметр из роута и запросить по нему данные из REST API - кажется если не костылем, то не всегда оптимальным.

Как можно получать и передавать данные компонента для роута используя props и $emit?

Comments

[Roman K]

Можно конкретный пример?

[bormor]

Roman Kitaev, есть роут где юзер заполняет форму, есть роут где юзер смотрит аналитку.

При переходе между роутами мы хотим сохранить введенные данные, не выполняя запросы на сервер по REST API.
Vuex подключать пока не хотелось бы.

Answer 1

[Сергей Соколов]

В любом компоненте доступен корневой Vue через this.$root, хотя в документации настаивают, что лучше вместо этого перейти на vuex.

Можно хранить данные в this.$root.$data, как вариант. Писать их туда напрямую, или, более мягко, вызывать из компонента события на руте:

this.$root.$emit('formFilled', {name:"Ivan", job:"developer"})

Comments

[Антон Швец]

надо еще сделать разделение данных на блоки и добавить методы, которые обрабатывают события, и computed, которые считаются от данных в data.
И будет практически велосипедный vuex

Answer 2

[Ilya]

это как бы не костыль

Comments

[bormor]

Во многих ситуациях да, но не всегда.

Как можно обменяться данными с таким компонентом без запросов к серверу?

[Ilya]

Тогда при переходе делай эмит события с передачей данных а на странице аналитики подписывайся на эвент и обрабатывай данные

[bormor]

Ilya, Спасибо за ответ.
А кто будет ловить события по умолчанию? Родитель?
Или это можно сделать только через eventBus? (глобальную шину событий)

[Ilya]

bormor, это уже от вашей фантазии все зависит, одну задачу можно решить многими способами, и все они будут иметь право на жизнь