Vuex3 Nuxt.js에서 Vuex Strict Mode 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로 설정하는 것이 좋습니다. 동기적으로 처리가 되기.. 2021. 5. 18. Nuxt.js vuex-persistedstate로 화면 새로고침에도 데이터 유지하기 vuex-persistedstate를 통한 화면 새로고침에도 데이터 유지하기 Vue.js든 Nuxt.js든 Vuex를 사용하다 보면 새로고침 시 데이터가 사라지는 것을 확인할 수 있습니다. 이는 Vuex가 JavaScript 레벨에서 데이터를 취급하기 때문에 페이지 새로고침(F5)시 데이터 값이 사라지게 됩니다. 이전 Nuxt.js에서 Vuex Store 사용하기 작성할 때 Vuex에서 데이터가 사라지는 것을 어떻게 해결을 해야할 지 고민했습니다. 구글갓에 검색을 해보고 npm으로 라이브러리를 다운받아 사용하기로 생각했습니다. 그중에 저는 vuex-persistedstate 라이브러리를 사용하기로 결정했습니다. (이것 말고 몇가지 테스트를 해봤는데 별 차이점을 못느꼈습니다ㄷㄷ) 저는 Nuxt.js에서 v.. 2021. 5. 4. Nuxt.js 에서 Vuex Store 사용하기 원래는 이 블로그 용도를 개발 공부하면서 기록할 겸, 알고 있는 내용도 잊지 않게 기록의 용도로 사용하자 라고 생각을 했었는데, 조회수가 1이 생기는 것을 보고 다른 사람도 볼 수 있는데 반말을 쓰는 건 조금 아닌 것 같아 앞으로는 이 부분은 지양하면서 기록을 해보려고 합니다. 최근에는 Dart와 Flutter 공부를 집중적으로 하는 중이라 Nuxt는 알고 있거나 알아야 할 내용들에 조금 소홀하고 있긴 하지만 Nuxt는 몸으로 겪어본 만큼 계속 포스팅을 해야겠다 라는 생각이 드네요. Nuxt에서 Vuex를 사용하는 방법에 대해 작성하려고 합니다. 아마 Vue를 경험하신 분이면 크게 어려운 점은 없을거라 생각이 듭니다. Store 이 store 디렉토리에는 Vuex Store 파일들을 포함합니다. 또한 T.. 2021. 4. 15. 이전 1 다음 728x90 반응형
