Nuxt 2(vuejs) 스토어에서 모드 활성화
<p>vuex 스토어에서 모달 구성요소를 활성화해야 합니다. 결과 API가 성공하면 'this.$refs['modalSuccess'].show()'를 사용하여 구성 요소 내부에 모달을 표시합니다! </p>
<p>하지만 "sendLeadResponse" 함수를 메소드(컴포넌트)에서 오퍼레이션(스토리지)으로 변경해야 합니다. 그 후에는 더 이상 'this.$refs['modalSuccess'].show()' 를 사용하여 모달을 활성화할 수 없습니다. </p>
<p>매장에서 전화할 수 있는 방법이 있나요? </p>
<p>과정은 다음과 같습니다.</p>
<올>
<li>버튼: 구성요소 내부의 메소드를 활성화합니다.</li>
<li>방법: 스토어에서 작업을 활성화합니다.</li>
<li>작업: 외부 API를 사용합니다. </li>
<li>모달: 결과가 정상이면 구성요소 내부의 모달이 활성화됩니다. </li>
</ol>
<p><strong>버튼과 모달이 있는 구성요소</strong></p>
<pre class="brush:php;toolbar:false;"><템플릿>
<섹션>
<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() !!!!!!!!!!!!!! [그것은 작동하지 않습니다)
}
})
},
}</pre></p>
