VueCLI Vuex 적용하기

1. vuex를 사용하는 이유: vuex는 상태관리를 편하게 할 수 있는 패키지 입니다. 회사에서는 vuex를 사용하지 않고 개발을 진행하고 있는데 API통신을 통해서 데이터를 받아오고 이를 적용시키기 위해서 event를 발생시키거나 props로 다른 컴포넌트로 데이터를 전달하고 있습니다. 작은 프로젝트라면 상관없지만, 많은 기능이 생긴다면, event와 props가 쓸데없이 많아지고 각 컴포넌트마다 독립성이 떨어져서 코드가 복잡해지고 중복이 많은 코드를 생성하게 됩니다. 이를 쉽게 해결하기 위해서 vuex를 사용하는 것을 결정하였습니다.
2. vuex 설치하기

npm install vuex --save

3. 저는 vuex에서 제안하고 있는 파일구조를 참고해서 사용할 예정입니다.

src
...
├── utils
│   └── apis
└── store
    ├── index.js          # 모듈을 조합하고 저장소를 내보내는 곳 입니다.
    └── modules
        ├── cart.js       # cart 모듈
        └── products.js   # products 모듈

4. 용어에 관해 간단하게 정리하겠습니다.

state: 변수를 저장하고 쉽게 가져올 수 있는 역할을 수행합니다.
getter: 컴포넌트에서 state변수 계산하여 가져다 쓸때 사용합니다.
mutations: 이벤트발생과 비슷하게 사용하며, 
           실질적으로 값을 변경하는 부분입니다.
actions: mutations와 비슷하지만 비동기적 작업과 
		 mutations을 사용합니다.
         즉, 실질적인 API통신을 하고 mutations을 
         불러 값을 바꾸는 역할을 하는 부분입니다.
modules: 하나의 state에서 관리하게되면 복잡해 질 수 있습니다. 
         그래서 이를 module로 나누어 사용할 수 있습니다.