Vue 구성 요소 외부에서 변수 값을 변경하는 최상의 방법

Vue 구성 요소 외부에서 변수 값을 변경하는 최상의 방법

구성 요소 외부에서 Vue 변수 값을 변경할 수 있는 최선의 방법을 찾고 있다.나는 Vue 웹팩도 사용하고 있어.

나는 vue 웹팩을 이용하여 프로젝트를 만들었다.기본 App.vue 파일 안에 변수가 있다.예를 들어 showModal을 예로 들어보자. 그리고 그 기본값은 거짓이다.그리고 나서 나는 그것을 하나의 자바스크립트 파일로 만들었다.

<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로 변경하고 싶은데, 이벤트 버튼이 구성 요소 템플릿에 없다는 겁니다.

이것을 성취하기 위한 가장 좋은 접근법은 무엇인가?

vue 이외의 vue 구성 요소에 액세스하려면 해당 구성 요소를 창 개체에 등록한 후 어디서나 액세스하십시오.

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

이제 다른 곳에서도 액세스할 수 있으며

window.myVueComponent.myValue = 123

그러나 이런 '스타일'은 이유로 글로벌 네임스페이스 오염이라고 불린다.;)

나는 당신의 vue 앱을 확장하여 버튼이 vue 핸들링 구성 요소 안에 있도록 하는 것이 더 좋다고 생각한다.

첫째로, 가장 현명한 접근법은 기존 요소와 그들의 관계 사이의 관계에 대해 생각하는 것이 일반적이다.예를 들어 전달하려는 정보가 직접 형제 또는 체인 아래쪽에서 사용될 경우props.

현재 상태 외에 직접적인 관계가 없는 두 구성 요소를 다루는 경우 리포지토리 패턴 또는 Vuex(상태 관리 라이브러리 같은 플럭스)를 사용하여 상태 또는 리포지토리 패턴의 속성에 참조를 전달할 수 있는 것으로 추정해야 한다.

FooRepository.js

export default class FooRepository {
  SomeRef
  ManyRef = []

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

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

}

위의 내용은 애플리케이션 계층에서 인스턴스(instance) 속성 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
    }
  }
})

이것은 우리가 어떻게 참조를 저장할 수 있는지를 보여주는 아주 기본적인 상점인데, 메인 내부에 저장소를 등록하면 우리 부품에 있는 이 참조에 접근할 수 있다.이 작업은 다음을 사용하여 수행할 수 있다.this.$store.state.ref이 두 접근방식은 가 없는 을 위한 접근방법으로 이 두 가지 접근방식은 단순한 소품이나 직접적인 관계가 없는 구성요소에 대한 이벤트 방출기와 같은 것에 비해 최선의 접근방법으로 간주된다.

배출용 새 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의 vue CDN(vue의 일요일)을 사용하는 대신 의 일반 js 파일)을 사용하는 경우global.event사용하다window.event만드는 동안에만event사 창브라우저에서 선언되지 않은 변수를 사용하는 경우 창 개체를 가리킨다.

참조URL: https://stackoverflow.com/questions/51173790/best-approach-to-change-variable-value-outside-of-vue-component