Рут доступ к методам VUE 3

Question

Всем привет. Во второй версии VUE 2 я использовал такую команду this.$root.$refs.Название и вставлял его в created компонента. И с этого момента мог получить доступ к его методам и переменным из других компонентов. Щас перешел на Vue 3 и выдает ошибку. Походу не поддерживается. Какая есть альтернатива кто знает? Раньше делал так и работало:

export default{
 data: () => ({
     page:1,
   }),

   created() { 
          this.$root.$refs.mycomponent= this; 
    },

    methods:{
     nextPage($i){
              this.page=$i;
          }
   },
}

или может еще другой способ есть чтобы получить доступ к методам и переменным друг другу совершенно разным компонентам?

Answer 1

Очевидно, это проблема XY.

или может еще другой способ есть чтобы получить доступ к методам и переменным друг другу совершенно разным компонентам?

Безусловно, такие способы есть. Более того, практически любой другой способ будет являться предпочтительным, потому что записывать свойства в рут так, как это делаете вы - это костыль и совершенно не Vue-way.

Варианты следующие:

Для Vue 2 был такой паттерн как EventBus. Создавался отдельный компонент который встраивался в другие как дочерний и служил только для выбрасывания событий на нем, чтобы один компонент мог это событие инициировать, а другой на него подписаться.
Во Vue 3 необходимость в EventBus отпала в виду того, что реактивность была вынесена из ядра в отдельные методы. Теперь стало возможно определить реактивную переменную как export const myVar = ref(), импортировать ее буквально куда угодно и не потерять при этом реактивность.
provide-inject. Стандартный способ работы с компонентами неопределенного уровня вложенности (зачастую, рекурсивных компонентов). Родительский компонент предоставляет (provides) какое-то реактивное значение, любой дочерний компонент включает (injects) его в себя (при необходимости).
Более системным подходом будет использование какой-нибудь стейт-менеджмент библиотеки. Их множество различных форматов, но есть официальные реализации Flux-архитектуры, такие как Vuex и Pinia (предпочтительно). По сути, вы просто создаете некое глобальное хранилище, значения в котором реактивны и доступ к ним можно получить из любого компонента в приложении (и даже вне компонентов, если речь идет о Pinia).

В целом советую почитать вот это.

БЛОГ НА HUSL

Рут доступ к методам VUE 3

Ответы (1 шт):