Vuex 변수 재할당 문제

Vuex를 새롭게 사용하면서 몇시간동안 나를 미치게하는 문제가 발생했었다.

Vuex.Store{
 state : {
   myList : []
 },
  mutations : {
   setMyList( state, payload ) {
     state.myList = payload.newList;
   }
  },
  getters : {
    getMyList : state => { return state.myList }
  }
}

이러한 myList 데이터가 있었고, 초기 페이지 로드 이후 이 목록을 mutator로 추가한뒤, 추가된 myList 갯수만큼 화면에 v-for로 뿌려주는 아주 간단한 문제였으며, 예상과 다르지 않게 자알 동작했다. 돌이켜보면 이게 화근이다.

이후 mutate로 한번더 값을 변경한 다음,  다시 한번 getters를 호출했다. 그런데 왠걸?
업데이트가 전혀 작동하지 않는다.

이때부터 원인을 파악하기 위해 여기저기를 들쑤시고 다니면서 난장판을 만들며두시간을 허비했다.

마침내 state의 값은 변경되었으나, Vuex에서 바뀐값을 인지하지 못한다는 결론이 났고, 뒤늦게 해당 이슈로 검색을 진행 할 수 있게 되었다.

마침내 이슈에 대한 실마리를 얻었는데 :

Vue does not allow dynamically adding new root-level reactive properties to an already created instance.

"Vue 인스턴스단에서 동적으로 새 root-level단의 변경을 허용하지 않는다" 정도로 이해하면 될거 같다.

내가 하려는  행위는 Vue인스턴스에 있는 store(Vuex) 의 state 를 임의로 변경하려는 행위였으며, Vue는 변경을 감지하지 못했던 것이다. 이렇게 생각해보면 애초에 처음에도 똑바로 동작이 되지 않았다면 좀더 빨리 문제를 파악할 수 있었겠지만, 변경이 어느 타이밍에는 되나, 절대 보장할 수 없는 변경 방법이었던 것으로 파악된다.

이후 가이드에 따라 올바른 변경방법을 mutation에 적용했다.

mutations : {
  setMyList ( state, payload ) {
    Vue.set(state, 'mylist', payload.newList);
  }
}

이렇게함으로써 Vuex는 변경을 바로 파악할 수 있게 되었다.

오늘도 신나는 삽질 끄읏