Vue 윈도우 팝업사용 및 store 적용하기

Vue프로젝트에서 원칙적으로는 팝업사용을 안하는게 맞지만, 대부분의 프로젝트를 하다보면 으레그렇듯이 고객의 요구에 따라 window.popup을 사용하게 되는경우가 있다.

 

문제는 vuex등으로 store를 사용해서 데이터를 전달해야 되는데 window.popup을 호출한 창은 별도의 뷰 인스턴스로 인식이 되서 store에 저장된 값을 활용을 못한다. 

 

해서 우리의 알고리즘을 통해 찾은 방법을 공유한다.

 

1. 우선 팝업창을 띄우는 방법부터

1. POP.VUE를 만든다.

2. 위에서 만든 POP.VUE를 라우터에 등록한다.

{ path: "/POP", name: "POPUP", component: () => import("@/views/page/POP"), },

3. 특정 버튼에 아래와 같이 팝업창을 호출한다.

window.open(POP, POP, width=1000,height=800,left=0,top=0);

 

2. 스토어에 등록된 값을 변경하는 방법

'누군가 장애인차별법의 큰 뜻에 감동해 우리의 화면 UI는 왼손잡이도 사용이 편하게 하겠다는 의지를 품고 왼손잡이용 UI도 필요하다 라고 했을 경우를 가정해보자'

 

1. store의 state에 '왼손잡이용'을 만들어 놓자. 대략 getters에 등록도 하고 ,mutation에도 해놨다는 설정으로

state: () => ({
    set_lefthand: false, 
  }),
getters: {
	GET_SET_EFTHAND: (state) => state.set_lefthand,
},
mutations: {
	 MU_SET_LEFTHAND: (state, data) => {
      state.set_lefthand = data;
  },
}

2. 자, 이제 POP.VUE에서는 왼손잡이를 위한 토글(radio 라던가) 설정을 누르면 해당 값이 부모창의 Vue의 store에 전달해야 한다. 

toggle이라는 변수에 radio버튼에 값이 바뀔때마다 메서드를 실행해서 ,어쨌든 왼손잡이면 true를 호출해서 넘기도록 한다.

중요한건 toggle이라는 변수를 post로 넘겨준다는 것

window.opener.postMessage({ message: toggle }, "*");

setLeftToggle() {
    let toggle = this.PERSONAL_SETTING.LEFTHAND === 'right' ? false : true;
    window.opener.postMessage({ message: toggle }, "*");
},
      

3. 그다음에 다시 부모창 PARENT.VUE로 돌아와서 할일은  mounted에 아래와 같이 POP.VUE에서 넘긴 message를 가지고 와서 적용시키면 놀랍게도! 적용이 된다. 

mounted() {
  window.addEventListener("message", event => {
    this.$store.commit("commonStore/MU_SET_LEFTHAND", event.data.message);
  });
}