UserStory.
서비스 어디에서나 열고 닫을 수 있는 모달
ex) 어느 메뉴 어느 게시판에서나 열 수 있는 내용 상세보기 modal화면
vuex사용하기
1. state에 전역 변수 지정한다.
2. state값을 변경하기 위한 mutations에 method를 정의한다.
3. state에 저장된 변수를 해당 modal에 적용한다.
... /vuex/index.vue
<script>
var store = new Vuex.store({
state : {
isModalOpen : false
},
mutations : {
modalSwitch : function(state, value){
state.isModalOpen = value;
}
}
</script>
}).../index.vue
<body>
<div>
<button @click="openModal"></button>
</div>
</body>
<script>
methods : {
openModal : function(){
this.$store.commit('modalSwitch', true);
}
}
</script>... /compoenet/modal.vue
<body>
<div id="modal" v-if="isModalOpen">
<button @click="closeModal">close modal</button>
</div>
</body>
<script>
data : function(){
return{
isModalOpen : this.$store.isModalOpen
}
},
methods : {
closeModal : function(){
this.$store.commit('modalSwitch', false);
}
}
</script>
FE 개발 기록들을 정리해 놓은 이솝개발일지입니다.