[Vue.js] vuex의 상태 값의 변화를 감지해서 지역 변수에 반영하는 방법

웹 프론트엔드를 개발하는 도중에 스낵바 컴포넌트를 사용할 일이 생겼는데, 다양한 vue 파일에서도 사용할 것 같아서 vuex에 스낵바 표출 여부인 snackbar 변수와 스낵바 메시지 값인 snackbar_message 변수를 할당해서 보관하고, 필요할 때 마다 actions를 통해 값을 변경하면 스낵바가 나타나게 구현하기로 하였습니다.

처음에는 v-model="this.$store.getters.get_snackbar"와 vuex의 snackbar를 직접 지정해주었더니 5초 타이머가 지난 후에 스낵바가 없어지는 과정에서 해당 값을 변경할 수 없다는 오류가 출력되었습니다. 이에 따라, 지역 변수로 snackbar를 만든 후에 v-model="snackbar"로 지정하고 vuex의 snackbar 값이 변경되는 것을 감지했을 때 지역 변수 snackbar도 함께 변경해주기로 하였습니다. 이를 위해, watch를 사용해야 하는데, vuex의 값을 직접 watch로 설정하는 것은 불가능합니다. 이러한 문제를 해결하기 위해 다음과 같이 computed와 watch를 함께 사용해주면 됩니다.

computed:{
  check_snackbar(){return this.$store.getters.get_snackbar}
},
watch:{
  check_snackbar(val){
    this.snackbar = val
  }
},

위와 같이 computed로 vuex의 값이 변경될 때 새 값을 반환하고, 그 함수를 watch가 감시하면 새 값을 지역 변수 snackbar에 바로 할당할 수 있습니다.