Vue.js 완벽 가이드 - VUEX
===

###### tags: `석기`

---

## 스토어 구현

이전과 달라지는 부분

<img width="837" alt="image" src="https://user-images.githubusercontent.com/52649378/163677379-37495350-de46-4c27-b04b-830a8e8f16cf.png">

---

1. VUEX 설치

npm i vuex@3.6.2

2. 모듈화

- `src/store/index.js` 에 모듈화를 진행한다.

3. 선언

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

new Vuex.Store({
    state: {
        ...
    },
    getters: {
        ...
    },
    mutations {
        ...
    },
    actions:  {
        ...
    },
})

### State

- vuex는 상태관리가 목적이다.
- 현재 NewsView가 users data 속성을 다른 컴포넌트에서 조작해야할 경우가 있다.

### Actions - 모든 api 콜은 이곳에서.

- api를 vuex에서 호출한다? -> actions 에서 호출하여야한다.
- 가져온 데이터를 state에 넣고싶다?
- 바로 넣을수 없다!!!!!
- 기본적으로 제공되는 `context` 라는 객체/인자가 제공된다.
- 해당 context의 commit이라는 api를 통해서 **mutation**에 데이터를 넘긴다.

### Dispatch

- action의 함수를 호출하려면 dispatch를 통해 호출하여야 한다.

<img width="780" alt="image" src="https://user-images.githubusercontent.com/52649378/163678661-e731b014-486d-4481-968d-5ce91badfe8b.png">

---

### mapGetters

### mapState

### computed

http://itnovice1.blogspot.com/2019/01/vue-mapstate-mapgetters.html

---

### Store를 모듈화하자!

- mutations, actions 관련
- 해당 객체는 모듈화를 통해서 분리해보자.