vuex 상태를 통해 열려 있는 부트스트랩-vue 모드 관리

vuex 상태를 통해 열려 있는 부트스트랩-vue 모드 관리

여러 bootstrap-vue 모달의 시퀀스를 필요로 하는 애플리케이션을 구축하고 있습니다.특히, 중첩된 컴포넌트의 버튼을 누르면 '관리' 모드가 열립니다.manage' modal에는 버튼을 클릭하면 manage' modal이 닫히고 다른 modal(예: '편집', '추가', '완료' 등)이 열립니다.

오히려고는 실제로 다른 중첩 부분에서 유발될 최대 props/emitting 시사보다, 제 가게에, 다른 네스트된 컴포넌트에서 트리거되도록 소품/이벤트를 위아래로 넘기는 것이 아니라 하나의 값을 매장에 가지고 싶다 하나의 값을 가지고 싶다.this.$store.state.general.activeModal, 조동사( 있는 경우)는 보여 주고 있는지 여부를 확인합니다.표시되는 모달(있는 경우)을 결정합니다.

질문:.상태 값이 변경되었을 때 렌더링하는 모달 세트를 내 메인 앱 페이지에 만들려면 어떻게 해야 합니까?

메인 앱은 다음과 같습니다.

<template>
   <app-stuff />
   <b-modal id="modal1" />
   <b-modal id="modal2" />
   <b-modal id="modal3" />
</template>

때 예:modal1은 다음경우에 표시됩니다 예:modal1 보여 주어야 한다.this.$store.state.general.activeModal' 때는 값 다른 무언가로 변경은 문을 닫을 'modal1에 가져오거나 설정합니다.값이 다른 값으로 변경되면[modal1]로 설정되고 닫힙니다.

나는 계산"showModal1"을 생성하려고 했는데,이값은 다음과 같습니다 변수 그것이 사실화된 가변"showModal1"을 만들려고 했다.store.etc.activeModal=='modal1'그리고 거짓 그렇지 않으면, 그때 그렇지 않으면false를 사용하여를 사용하여.v-modal="showModal1"지만, 조동사를 표시하려면 그냥 조동사의 복사본이 두개 매장에 있는 값(때 가게에서 값이 변경은 분명 계산된 값 두번의 시발점이?)과 일치할 때마다를 만들어 내고야 말았다.모달 표시/숨기기만 해도 스토어의 값이 일치할 때마다 모달 복사본이 두 개 생성됩니다(스토어 값이 변경되면 계산된 값이 두 번 트리거됨).

어떤 도움이라도 좋아요!

다음과 같이 각 모달의 가시성을 위해 계산된 속성을 생성할 수 있습니다.

computed: {
  modal1Visible() {
    return this.$store.state.activeModal === 'modal1';
  }
}

그리고 그 그를 설정합니다 후를 세웠다.visible그 b-modal의 속성:b-modal 속성:

<b-modal :visible="modal1Visible" id="modal1">

폐막개는 처리하기 위해, 당신은클로징 모드를 처리하려면 사용할 수 있다.hide는 값을 설정하는 스토어 액션 또는 돌연변이와 조합된 이벤트의 값을 가져오거나 설정한 가게 행동 혹은 돌연변이와 어우러져 이벤트.this.$store.state.activeModal예를 들어:예를들어 다음과 같습니다.

<b-modal :visible="modal1Visible"
         @hide="$store.commit('activeModalSet', null)"
         id="modal1"
</b-modal>

, 을 ,v-b-modal버튼 "directive, close" "disclose" :

1. 은 음음음음 a a a a a a a a a a a a를 .hide
2. activeModalSet 「변환」이 설정됩니다.설정this.$store.activeModal로로 합니다.null
3. modal1Visible됩니다.false
4. visible거짓

도 꼭 하시길 권해드립니다.b-modal돌연변이를 의 . . 상태 돌연변이를 검출하는 워처: .show() 및 .hide():

<template>
    <div>
        <b-modal ref="modal1" id="modal1"></b-modal>
        <b-modal ref="modal2" id="modal2"></b-modal>
        <b-modal ref="modal3" id="modal3"></b-modal>
    </div>
</template>

mapGetters는 신경 쓰지 마세요.점포/주(州)에 주의할 필요가 있습니다.여기서는 activeModal이 상태 값이라고 가정합니다.

computed : {
    ...mapGetters([
        'activeModal'
    ])
},
watch : {
    activeModal(newActiveModal, oldActiveModal) {
        // If an old value was setted, we want to hide it in anyway.
        if (oldActiveModal) this.$refs[oldActiveModal].hide()
        // If the new value is falsy, do nothing
        if (!newActiveModal) return

        this.$refs[newActiveModal].show()
    }

}

아니지만 Bootstrap-vue를 한 Bootstrap 했습니다.v-if지시.모달은 조건이 참일 경우에만 표시/렌더합니다.

Vuex를 사용하면 activeModal에 대한 계산 속성과 다음 기간 동안 각 모달에 대한 v-if를 가질 수 있습니다.v-if="activeModal == 'modalName'"모델에서는 Vue 라이프 사이클을 사용했습니다.mounted모드를 표시해, emiss를 등록합니다(bootstrap-vue는 그것을 다른 방법으로 처리할 수 있습니다).

$('#' + this.modalId).on('hide.bs.modal', () => { this.$emit('closeModal') //this would set the v-if in parent Component to false, un-rendering the modal component })

언급URL : https://stackoverflow.com/questions/49427898/managing-which-bootstrap-vue-modal-is-open-through-vuex-state