[Nuxt.js] Vuex state가 변경되어도 자동으로 update되지 않는 layout 컴포넌트 업데이트시키기

Nuxt.js의 경우 layout 폴더에 따로 분류된 컴포넌트들은 Vuex state가 변경되어도 자동으로 업데이트되고 캐싱된 값을 사용한다. 그래서 일종의 강제 리렌더링이 필요하다.

이 때, Nuxt의 $store.subscribe() 함수를 사용해 mutation이 일어날 때마다 말 그대로 그 변화를 '구독'할 수 있다.

그러나, 이 방법은 코드를 더 복잡하게 만드는 방법이므로 computed를 사용할 것을 권장하고 있다. 빠른 시간 내에 업무를 처리하려다보니 이런 코드를 사용하게 됐는데, 간편하고 보기도 좋으며 Nuxt(Vue)의 Lifecycle을 자연스럽게 따라가는 computed를 대신 사용하자!

예시 코드

created() {

    ...

    if (this.isLogin) {
      this.$store.subscribe((mutation) => {
        if (mutation.type === 'something') {
          if (process.browser) {
            if (window.location.pathname === 'something/that' && mutation.payload?.someList?.length === 0) {
              this.someBoolean = false
            }
          }
        }
      })
    }

    ...

}

 

해당 코드는 만약 로그인이 된 상태에서 해당 layout에 진입했다면 그 시점에 진행된 mutation을 불러와 특정 mutation을 찾고, 그 변경 내용을 가지고 해당 컴포넌트 내의 데이터를 변경시키는 코드다.

 

mutation.payload로 변경 내용을 찾아서 원하는 작업을 할 수도 있고, 리렌더링도 함께 일어나게 되어 내가 한 작업을 UI에 반영할 수 있다.