Dev Day

Vuex Strict Mode

Vuex에서 Strict Mode란 Vuex Store의 상태값들을 mutations를 통해서만 변경할 수 있도록 강제하는 역할을 합니다.

Vue.js에서나 Nuxt.js에서도 이 Strict Mode는 기본값이 true로 설정되어 있습니다.

Nuxt.js에서는 개발모드에서는 true이며 프로덕션 모드일때에는 자동으로 false가 됩니다.

 

Strict Mode가 true이면 전체 상태에 대한 감시가 동기적으로 이루어집니다.

그리고 Vuex 상태가 변이 핸들러 외부에서 변이 될 때 마다 오류를 발생시킵니다.

이로 인하여 디버깅 도구로 모든 상태변이를 추적이 가능하여 개발시에 많은 도움을 줍니다.

 

다만 실제 배포시에는 false로 설정하는 것이 좋습니다.

동기적으로 처리가 되기 때문에 많은 변이가 일어나는 곳에는 비용이 커지게 되어 성능에 영향을 줄 수 있습니다.

 

출처 : https://ko.wikipedia.org/wiki/Vue.js

Vue.js에서 Strict Mode 설정

Vue.js에서는 아래와 같이 Vuex 저장소를 만들 때 설정하면 됩니다.

const store = new Vuex.Store({
  // ...
  strict: true
})

성능 이슈를 피하기 위해서 개발모드에서만 사용하며 배포시에는 false로 설정해주셔야합니다.

Vue.js 공식 페이지에서도 아래와 같이 실제 배포에는 사용하지 말라고 되어있네요.

배포시 strict 모드를 켜지 마십시오!
 Strict 모드는 부적절한 변이를 감지하기 위해 상태 트리를 자세히 관찰합니다. 성능 이슈를 피하기 위해 배포 환경에서 이를 해제 하십시오.

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

위 와 같이 실제 프로덕션이 아닐때만 설정하는게 가장 좋습니다.

 

출처 : https://en.wikipedia.org/wiki/File:Nuxt_logo.svg

Nuxt.js에서 Strict Mode 설정

Nuxt.js에서는 따로 설정을 하지 않아도 기본적으로 Vuex Store 생성 시 아무값도 입력하지 않으면 true로 설정이 됩니다.

만약 개발시에도 Strict Mode를 끄고 싶다면 아래와 같이 설정하시면 됩니다.

// store/index.js

export const strict = false

그러나 개발시에는 많은 도움을 줄 수 있으니 저는 개발시에는 켜두고 사용합니다.

 

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

Strict Mode를 켜고 개발을 진행하다 위 와 같은 에러 메시지를 보게 된다면 mutation이 아닌 곳에서 Store의 상태값을 변경하려고 했을 때 발생합니다.

저도 예전에 멋모르고 콜백함수를 통해 상태값을 변경하려다 저 메시지를 만난적이 있습니다.

그래서 찾아보니 대부분 콜백함수를 사용하다가 위 에러 메시지를 자주 만난다고 하더라구요.

 

혹시나 잘못된 내용이 있으면 댓글로 남겨주세요!