# 4. 스토어 구현

###### tags: `지호`, `Vue.js 완벽 가이드`

---

## 1. Vuex
- 상태 관리 도구
- 여러 컴포넌트에서 중복적으로 관리되는 데이터 속성들

참고: https://v3.vuex.vuejs.org/kr/

### 설치

npm i vuex@3.6.2

### 구조
API 데이터 호출 -> Vuex -> 컴포넌트

<br/>

## 2. Vuex action/mutation/state


1. 컴포넌트에서 **action**을 **dispatch**
2. action에서 비동기 호출하여 데이터를 가져옴
3. 받아온 데이터를 **commit**하여 **mutation**에 넣어줌
4. mutation을 통해서 state에 넣어줌
5. 컴포넌트에서 스토어의 state에서 데이터를 가져옴

<br/>

src/main.js


src/store/index.js



src/views/NewsView.js


<br/>

## 3. Map 헬퍼 함수 이용

방법 1


<br/>

방법 2


<br/>

방법 3
getters: computed와 동일한 속성인데 스토어에 있는 것
참고: https://v3.vuex.vuejs.org/kr/guide/getters.html


src/store/index.js


<br/>

## 4. 스토어 속성 모듈화

actions와 mutations를 스토어에서 분리한다.

src/store/index.js


src/store/actions.js


src/store/mutations.js