store.watch in Vuex :: 마이구미

이 글은 Vuex 저장소의 상태(state)에 대해 watch 사용법을 다뤄본다.

vuex를 이용할 때 watch 구현 방법을 알아본 후, watch가 작동이 안되는 경우도 원인을 파악할 수 있는 방법을 알아본다.

기본적으로 watch는 상태의 동적 변화를 감지하기 위해 사용한다.

일반적으로 Vue.js는 watch 또는 computed를 활용한다.

Vuex 저장소의 상태 변화를 감지해야할 필요가 있을 수 있다.

크게 2가지로 방법으로 볼 수 있다.

1. store.watch 활용

const store = new Vuex.Store({
    state: {
        n: 10
    },
    getters: {
        getN() {return state.n}
    }
})

new Vue({
    el: '#app',
    store,
    mounted () {
        setInterval(() => { this.$store.state.n++ }, 1000)
            this.$store.watch(() => this.$store.getters.getN, n => {
                console.log('watched: ', n)
            })
    }
})

CODEPEN 링크

2. computed 활용

computed: {
    getN () {
        return this.$store.getters.getN
    }
},
watch: {
    getN (val, oldVal) {
        console.log('watched: ', val)   
    }
},    

상태의 변화는 어떻게 감지되는 지는 this.$store.getters.* 를 확인해보면 알 수 있다.

아래와 같이 console.log를 통해 출력해보면 된다.

1. Object
1. __ob__:Observer
2. add:(...)
3. get add:reactiveGetter()
4. set add:reactiveSetter(newVal)
5. __proto__:Object

Observer, reactiveGetter, reactiveSetter를 볼 수 있다.

getter, setter를 통해 데이터가 변화되면 감지할 수 있는 것이다.

만약, watch를 통해 감지가 안된다면, 해당 Vuex의 getter의 속성을 확인해보면 된다.

위와 같은 속성들이 없다면, 당연히 watch를 통해 변화를 감지할 수 없다.

감지하지 못하는 이슈 중 한 가지는 다음과 같다.

상태가 객체일 때 발생할 수 있다. 

객체 자체에 getter, setter를 넣을 수 없기 때문이다.

이러한 경우 해결법은 공식 문서에서 확인할 수 있다.

1. Prefer initializing your store's initial state with all desired fields upfront.

2. When adding new properties to an Object, you should either:

   • Use Vue.set(obj, 'newProp', 123), or -

   • Replace that Object with a fresh one. For example, using the stage-3 object spread syntax we can write it like this:

     state.obj = { ...state.obj, newProp: 123 }

1. 원하는 모든 필드에 대해 초기화

2. 객체의 속성 추가할 때,

    Vue.set을 통해 객체 프로퍼티를 추가하거나, 

    spread 문법을 통해 객체를 쪼갠 다음, 다시 추가하여, getter, setter가 들어가게 한다.

다른 문제인 경우는 라이프 사이클 훅(Lifecycle Hooks) 이슈가 크다.

이 경우는 다음 링크를 참고하자.

http://mygumi.tistory.com/201

vuex-reactivity-rules 관련 문서

https://vuex.vuejs.org/en/mutations.html#mutations-follow-vues-reactivity-rules