Nuxt 2(vuejs) 스토어에서 모드 활성화

Question

vuex 스토어에서 모달 구성요소를 활성화해야 합니다. 결과 API가 성공하면 'this.$refs['modalSuccess'].show()'를 사용하여 구성 요소 내부에 모달을 표시합니다!

하지만 "sendLeadResponse" 함수를 메소드(컴포넌트)에서 오퍼레이션(스토리지)으로 변경해야 합니다. 그 후에는 더 이상 'this.$refs['modalSuccess'].show()' 를 사용하여 모달을 활성화할 수 없습니다.

매장에서 전화할 수 있는 방법이 있나요?

과정은 다음과 같습니다.

<올>

버튼: 구성요소 내부의 메소드를 활성화합니다.

방법: 스토어에서 작업을 활성화합니다.

작업: 외부 API를 사용합니다.

모달: 결과가 정상이면 구성요소 내부의 모달이 활성화됩니다.

버튼과 모달이 있는 구성요소

<템플릿>
    <섹션>
    <div class="w-100 d-md-flex justify-content-md-end">
        <작은버튼
            smallButtonText="클라이언트 쿼리 →"
            @event="createLeadObject()"
            id="show-btn";
        />
    </div>
        <b-모달
            ref="모달성공";
            OK-only
        > Obrigado pelo interesse! Em breve entraremos em contato.
        </b-모달>
    </div>
    </섹션>
</템플릿>

<스크립트>
'../SmallButton.vue'에서 SmallButton 가져오기
기본값 내보내기 {
    이름: 'BeClientForm',
    구성요소: {
        작은버튼
    },
    방법: {
        createLeadObject(){
            const dataLeadObject = {
                날짜: 새 날짜(),
                전체 이름: this.lead.name,
                이메일: this.lead.email,
                전화: this.lead.phone,
                댓글: this.lead.comment
            }
            this.$store.dispatch('sendLeadResponse', dataLeadObject)
        },
    }
}

<p><strong>유명한 작품</strong></p>
<pre class="brush:php;toolbar:false;">작업: {
        비동기 sendLeadResponse({commit}, dataLeadObject){
            const jsonDataObject = JSON.stringify(dataLeadObject)
            
           fetch("http://localhost:5000/api/lead/leadResponse", {
                방법: "POST",
                헤더: {"Content-type": "application/json"},
                본문: jsonDataObject
            })
            .then((resp) => resp.json())
            .then((데이터) => {
                if (data.error) { 
                    커밋('MESSAGE_RESPONSE', data.error)
                }
                또 다른 {
                    커밋('RESET_LEAD_RESPONSE')
                    !!!!!!!!!!!!! this.$refs['modalSuccess'].show() !!!!!!!!!!!!!! [그것은 작동하지 않습니다)
                }
            })
        },
    }

Answer 1

Vuex 매장은 상태에만 관심을 갖도록 설계되었습니다. 구성 요소 또는 this.$refs에 직접 액세스할 수 없습니다. 당신이 할 수 있는 일은 얻은 결과에 따라 저장소에 상태를 설정하고 구성 요소가 해당 상태에 액세스하도록 하거나 작업에서 약속을 반환하여 결과를 구성 요소에 직접 전달하는 것입니다

으아악 으아악