---
# System prepended metadata

title: 4. 스토어 구현
tags: [Vue.js 완벽 가이드, 지호]

---

# 4. 스토어 구현

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

---

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

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

### 설치 
```javascript=
npm i vuex@3.6.2
```

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

<br/>

## 2. Vuex action/mutation/state

![](https://i.imgur.com/fkI8vzC.png)

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

<br/>

src/main.js

![](https://i.imgur.com/m5vvmFQ.png)

src/store/index.js

![](https://i.imgur.com/wI3AnpM.png)

![](https://i.imgur.com/EOvOuyq.png)


src/views/NewsView.js

![](https://i.imgur.com/TiWiV9i.png)


<br/>

## 3. Map 헬퍼 함수 이용

방법 1

![image](https://user-images.githubusercontent.com/24283401/162860242-aa0886d3-641b-446b-a48b-e50866e418e1.png)

<br/>

방법 2

![image](https://user-images.githubusercontent.com/24283401/162863909-e121e685-e620-4cb4-ad8c-cd730cefffcd.png)

<br/>

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

![image](https://user-images.githubusercontent.com/24283401/162860823-99d8e93f-65cc-45ad-93b1-46ce427d6041.png)

src/store/index.js

![image](https://user-images.githubusercontent.com/24283401/162860944-eddeba02-821a-4c14-b9b1-54a248d30690.png)


<br/>


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

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

src/store/index.js

![image](https://user-images.githubusercontent.com/24283401/162861390-da8c06c9-082d-458e-99de-d99df87824e0.png)

src/store/actions.js

![image](https://user-images.githubusercontent.com/24283401/162861420-960bdaa9-1fd6-48f9-ab06-a405df26ae70.png)

src/store/mutations.js

![image](https://user-images.githubusercontent.com/24283401/162861439-845418b5-3eaf-4460-bb5a-be690a99fa4a.png)
