개발/Vue

Vuex 모듈 state 깔끔하게 초기화하는 방법 (Reset Vuex Module State)

들어가기 전에 Vue 라이브러리로 서비스를 개발하다 보면 Vuex라는 상태 관리 도구를 사용하곤 합니다. Vuex는 애플리케이션의 상태 값을 하나의 객체로 관리할 수 있습니다. 하지만 서비스의 규모가 커지면 커질수록 모든 상태 값들을 단일 상태 객체 안에 넣고 관리하는 것은 굉장히 비효율적입니다. 이럴 경우 Vuex의 모듈(Modules) 컨셉을 사용하곤 하는데요. 이때 모듈에서 사용하고 있는 상태 값들을 초기화를 해야 될 경우가 생깁니다. 이번 포스팅에서는 Vuex 모듈에서 상태 값을 깔끔하게 초기화하는 방법에 대해서 다뤄보도록 하겠습니다. 예제코드 예시 1) 객체반환 함수로 구현 getDefaultState 함수는 초기 상태 값을 반환하는 함수입니다. 핵심은 getDefaultState 함수가 값을 ..

개발/Vue

Vuex 제대로 사용하는 방법 (Vuex의 기초부터 심화까지)

Vuex 란? vuex는 vue.js 애플리케이션을 위한 상태 관리 라이브러리입니다. 모든 컴포넌트들에서 접근 가능한 중앙 집중식 데이터 저장소입니다. 모든 데이터 흐름을 중앙에서 관리함으로써 예측 가능한 애플리케이션을 구현할 수 있습니다. Vue의 공식 devtools 확장프로그램과 통합해서 사용하면 훨씬 사용하기 쉬워집니다. 시작하기 (Vuex 설치 방법) vue-cli를 사용해서 vue 프로젝트를 세팅합니다. vue create vuex-test vue 프로젝트를 세팅했다면 vuex 라이브러리를 설치해주세요. yarn add vuex // or npm install vuex --save Nuxt에서는 기본적으로 Vuex를 지원함으로 따로 설치할 필요가 없습니다! Vuex Store Nuxt.js가 ..