Vuex 의 상태 값의 변화를 감지해서, data 에 반영하는 방법

이번 사내에서 Vue.js 를 활용한 웹 프로젝트를 진행하면서 echart 라이브러리를 통해 깊숙하게 활용하게 되었습니다.

한 페이지에 수십개의 차트 라이브러리가 만들어지고, 이를 사용자에게 보여주는 프로젝트입니다.

여기서 처음 Vue.js와 Vuex를 활용하면서 vuex에 state 값을 어떻게 하면 data에 있는 값에 반영시킬 수 있을까? 라는 고민을 하루 이상했습니다. 이 과정에서 computed 와 watch에 대해서 이해할 수 있는 기회도 얻었고, 동시에 조금 더 보람찬 개발을 할 수 있지 있었습니다.

포스팅의 제목처럼,

"Vuex 의 상태 값의 변화를 감지해서, data에 반영하는 방법"이란?

computed: {
    changedParams: function () {

      const params = {
        offset: 10,

        userId: this.$store.state.userinfo.userId,
        userLoginId: this.$store.state.userinfo.userLoginId,
        userName: this.$store.state.userinfo.userName,
        deptId: [this.$store.state.userinfo.deptId],
        deptName: this.$store.state.userinfo.deptName,

        startDate: this.$store.state.dateRangeValue.startDate,
        endDate: this.$store.state.dateRangeValue.endDate,
      }

      if (this.$store.state.userinfo.deptName !== "") {
        this.getAssetPreferFirstHeadquarters(params)
        this.getAssetPreferSixHeadquarters(params)
        this.getAssetPreferJaehwa(params)
        this.getAssetPreferSeocho(params)
        this.getPreferCountAsset(params)
      }
      return {
        deptId: [this.$store.state.userinfo.deptId],
        startDate: this.$store.state.dateRangeValue.startDate,
        endDate: this.$store.state.dateRangeValue.endDate,
      }
    },
  },
  watch: {
    changedParams(val) {
      this.deptId = val.deptId
      this.startDate = val.startDate
      this.endDate = val.endDate
    },
  },

computed 와 watch의 차이점을 명확해야만 해당 코드가 이해될 수 있습니다.

computed는 changedParams라는 객체를 생성하고, watch는 생성된 changedParams를 지켜봅니다.

state의 값이 변경된다면- computed 안의 값들은 캐싱된 상태로 존재합니다. 이때 computed 안에 함수들은 실행되지 않습니다.

이걸 watch는 지켜보다가, 데이터가 변경되었구나? 하고, this.deptId, this.startDate, this.endDate의 값을 새롭게 set 해주면서 computed안에 객체를 실행시킵니다.

그러나. 만약 computed에 등록된 changedParams 을 html 에 표시한다면 어떻게 될까요?

이 때 computed는 html에 표시되기 위해 computed 안에 코드들이 동작합니다. 즉 아래 아래의 watch는 필요가 없어지죠. 그러나, 제가 원하는건 html에 표시되지 않고, 변경된 객체를 알아차려서 다시 computed안의 객체가 실행되었으면 했습니다.