[vuejs] 페이지 이동 시, Interval 중지 시키는 방법

 

A 메뉴 화면에서 데이터 등록 시, 해당 데이터를 JSON 형태로 로컬스토리지에 담아 B 메뉴 화면에 뿌려주는 작업을 했다.

그런데 간헐적으로 해당 데이터를 받아오지 못하는 경우가 발생했다.

스토리지에는 제대로 담기는데, 참 이상했다.

 

2개의 브라우저를 띄워놓고 테스트를 반복했는데,

B 메뉴를 띄워놓은 브라우저에서 A나 C등 타 메뉴로 이동을 한 뒤 다시 B로 돌아오면 해당 문제가 발생하는 듯 보였다.

 

데이터를 등록하는 A에서 storage를 set해주고, B에서 mount할 때, storage를 get해주었는데 

get를 하면서 B메뉴의 그리드에 데이터를 넣어줄 때 setInterval()을 사용하여 주기적으로 데이터를 받아오도록 했다.

 

vue가 SPA이어서 그런지, 타 페이지로 이동할때에도 이전 Interval이 소멸되지 않고 남아있는 듯 했다. 그래서 지정해놓은 시간대로 움직이지 않고, 간헐적으로 움직이고 그때만 데이터가 받아오는 것 처럼 보여졌다.

 

찾아보니 clearInterval이라는게 있어서, unmount할 때, 해당 Interval을 중지시켜주었다.

 

 

<이전코드>

onMounted(() => {
  setInterval(function() {
  	if(localStorage.getItem('flag') === 'Y') {
       const target = localStorage.getItem('target');
       state.table.data.unshift(JSON.parse(target));
       localStorage.setItem('flag', 'N'); 
    }
  }, 500);
 });

 

<변경코드>

const getTargetData = () => {
	if(localStorage.getItem('flag') === 'Y') {
       const target = localStorage.getItem('target');
       state.table.data.unshift(JSON.parse(target));
       localStorage.setItem('flag', 'N'); 
     }
 };
 
 .
 .
 .
 
 mounted() {
   this.loading = setInterval(this.getTargetData, 500);
 },
 unmounted() {
   clearInterval(this.loading);
 }