Лучший подход для изменения значения переменной вне компонента Vue

Question

Я ищу лучший подход для изменения значения переменной Vue вне компонента. Я также использую Vue Webpack .

Я создал проект, используя vue webpack. Внутри его файла App.vue по умолчанию у меня есть переменная. Например, давайте возьмем showModal и его значение по умолчанию false . Затем я собрал его в один файл JavaScript.

<button>Register</button> {{-- event button --}}
<div id="guest"></div> {{-- Here I'm rendering my template --}}

<script src="{{ asset('js/vue-js/guest.js') }}"></script> {{-- builded Javascript file --}}

И проблема в том, что я хочу изменить мою showModal переменную на true , но кнопка события отсутствует в шаблоне моего компонента.

Каков наилучший подход для достижения этой цели?

Answer 1

Создайте новый экземпляр Vue только для излучения, назовите его глобальным менеджером событий.

global.event = new Vue()

когда вы хотите создать событие (например, модальное)

global.event.$emit('close-modal', (optional msg))

, если вы хотите закрыть модальное:

// В вашем компоненте

created(){
    var App = this;
    global.event.$on('close-modal', (optional msg)=>{
         this.showModal = false;
    })
}

Аналогичным образом сделайте это для открытия модального окна Если вы используете CDN vue (обычный js-файл vue), вместо global.event используйте window.event при создании и только event при использовании. В браузере, если используется необъявленная переменная, она ссылается на объект окна.

Answer 2

Во-первых, лучший подход - думать о связях между вашими существующими компонентами и их связями. Так, например, если информация, которую вы пытаетесь передать, будет использоваться в прямом брате или далее по цепочке, вы можете выбрать props.

Если вы имеете дело с двумя компонентами, которые не имеют прямой связи, кроме текущего состояния, вам нужно будет экстраполировать либо с использованием шаблона репозитория, либо Vuex (потоковая библиотека управления состояниями), где мы можем затем передать ссылку на состояние или в свойства в шаблоне репозитория.

FooRepository.js

export default class FooRepository {
  SomeRef
  ManyRef = []

  addRef(name) {
    this.someRef = name;
  }

  addRefs(names){
    this.ManyRef.push(names);
  }

}

Вышеприведенное может быть создано в вашем уровне приложений и совместно использоваться вашими компонентами с помощью свойства экземпляра https://vuejs.org/v2/cookbook/adding-instance-properties.html

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

const store = new Vuex.Store({
  state: {
    ref: null
  },
  mutations: {
    saveRef (state, compRef) {
      state.ref = compRef
    }
  }
})

Это очень простое хранилище, которое показывает, как мы могли бы сохранить в нем ссылку, после чего мы можем получить доступ к этой ссылке в наших компонентах, как только зарегистрируем хранилище в main. Это можно сделать с помощью this.$store.state.ref. Эти два подхода считаются лучшим подходом по сравнению с простыми простыми подпорками и чем-то вроде источника событий для компонентов, которые не имеют прямой связи.

Answer 3

Если вы хотите получить доступ к компоненту vue вне vue, вы можете зарегистрировать его в объекте окна и получить к нему доступ из любого места.

window.myVueComponent = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

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

window.myVueComponent.myValue = 123

Но этот «стиль» по причинам называется глобальным загрязнением пространства имен. ;)

Я думаю, что лучше расширить приложение vue, чтобы кнопка также была в компонентах с обработкой vue.