strict mode in Vuex :: 마이구미

이번 글은 상태 관리 패턴 모듈 Vuex의 엄격 모드에 대해 다뤄본다.

충분한 정보를 가지고 있다면, 엄격 모드로 인한 에러 발생 시 당황하지 않고 해결할 수 있다. 

"Error: [vuex] Do not mutate vuex store state outside mutation handlers."

혹시 위와 같은 에러가 발생했다면, 엄격 모드로 인해 에러가 발생한 것이다.

외부 변이 핸들러에서는 vuex 저장소 상태를 변이할 수 없다는 메시지가 된다.

대부분 콜백 함수에서 변이하려고 했을 경우 발생한다.

Vuex의 엄격 모드에 대해 처음부터 살펴보자.

Vuex를 사용해봤다면, strict 모드를 설정했을 것이다.

export default {
  modules: {
    channel,
    lock,
    player,
  },
  strict: true,
};

기본적인 예제들에는 true로 설정되어있다.

엄격 모드란, 전체 트리에서 상태에 대한 변이를 감시하는 것이 동기적으로 이루어진다는 것이다.

그로 인해, 모든 상태 변이를 디버깅 도구에서 추적이 가능하다.

결과적으로는 개발 시에 많은 도움을 주게 된다.

외부 변이 핸들러 영역을 벗어난 곳에서 상태를 변이하고 싶다면, false로 지정하면 된다.

또한, 실제 배포용에서는 false를 지정해야 한다.

동기적으로 처리되기 때문에, 많은 변이가 요구되는 곳이면, 비용이 커지게 된다.

공식 문서

https://vuex.vuejs.org/en/strict.html

엄격 모드 이슈

https://github.com/vuejs/vuex/issues/659