화면에 진입하자마자 watch함수를 실행시켜 데이터를 가져오도록 설계된 코드 구조. 그동안 복붙해서 사용했기 때문에 깊게 생각하지 않고 적용했었는데 오늘 이렇게 삽질(?)을 하게 될 줄은 몰랐다.. 복붙의 폐해
watch는 감시 대상 데이터를 바라보고 있다가 해당 데이터가 변경되었을 때 실행되는데, 변경이 없더라도 watch 함수를 능동적으로 실행 가능하도록 설정해주는 핸들러가 'immediate' 라는 녀석이다.
즉, 초기 렌더링 때 watch가 즉시 발동하도록 해준다.
결과 코드를 먼저 보자면 아래와 같다.
watch(
params,
params => {
console.log('watch실행 테스트')
store.commit('setParams', {
state.title,
params,
})
},
{
immediate: true, // 초기 렌더링 시점 호출 여부 설정
deep: true, // 중첩 데이터 감시 여부 설정
},
)
immediate 를 설정해줌으로써 params 변수의 변경이 없어도 watch가 트리거되어 콘솔 내용이 출력된다.
이슈 해결 전, 트리거가 일어나지 않았던 이유는 오타 때문이었다...
로 변경하니 바로 해결되었으나 날린 1시간이 너무 허무했다.
감시대상이 중첩 구조일 때, 감시 여부를 설정해줄 수 있다.