VUEX (1) - Vuex의 Store Pattern 및 사용법

vue 프로젝트를 진행 하다보니 데이터를 따로 저장하는게 깔끔한 코드를 짤 수 있지 않을까 해서 따로 데이터를 저장하는 폴더를 만드려고 한다. 

이때 저장 방식은 두가지가 있는데 하나는 store.js를 통해 저장하는 것과 하나는 더미데이터를 통해 저장하는 방식이다. 

두가지의 가장 큰 차이점은 사용 목적에 있는데 아래에서 store에 대해 알아보자. 

1. store

store파일은 기본적으로 vuex를 사용해서 데이터를 가져오는 것인데 이것은 컴포넌트 간의 데이터를 자유롭게 주고받기 위한 목적으로 사용한다. 따라서 미리 필요한 데이터 셋팅을 할 때 스토어에 저장하여 공통된 데이터를 공유한다는 개념이면 store를 사용하는 것이 맞다. 

📌Vuex?

vuex는 vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 의도적인 방법으로 상태를 변경 및 관리할 수 있다. Vuex는 기존 flux의 아키텍처를 따라가고 있고 react로 본다면 redux와 비교 대상으로 볼 수 있다. Vue.js에서도 Redux를 사용할 수 있지만 Vue.js는 Vuex와의 호환이 좋을 뿐만 아니라 더 직관적으로 개발할 수 있다. 

다음은  vue.js의 component의 개념을 알아야할 필요가 있다. 

👉Vue.js component?

componrnt는 일반적으로 부모-자식의 관계를 가지고 props와 event를 통해 서로의 데이터를 주고 받는다고하였다. 하지만 Vuex는 말 그대로 중앙 집중식 저장소 이기 때문에 props와 event에 얽매이지 않아도 된다. 그렇기 때문에 컴포넌트의 구조가 복잡한 경우에는 props와 event를 통한 데이터 전달보다는 Vuex를 통해 별도의 저장소에서 데이터를 관리하는 것이 올바르다.

대부분 Vuex의 채택은 필수로 보고 있지만, 규모가 작은 애플리케이션의 경우 Event Bus를 사용해도 무방하다. 하지만 Event Bus의 규모가 커지면 관리 포인트가 매우 어려워지므로 Vuex를 사용하는 것을 추천한다.

 

📌Vuex의 Store Pattern

Vuex는 state, mutations, action, getters 4가지 형태로 관리가 되며, 이때 이 관리 포인트는 store패턴을 사용하고 통상 sotre라고 불린다. 이 4가지는 서로간의 간접적으로 영향이 있으며 단방향 데이터 흐름으로 볼 수 있다. 

👉State

state는 Vue 컴포넌트에서 data로 볼 수 있다. 원본 소스의 역할을 하며, View와 직접적으로 연결되어있는 Model이다.  이 state는 직접적인 변경은 불가능하고 mutation을 통해서만 변경이 가능하다. mutation을 통해 state가 변경이 일어나면 반응적으로 View가 업데이트 된다. 

사용방법

1. state에 data 저장 

state() {
  이름: []
}

2.코드에 저장소에 접근 할수 있는 약속 기호를 사용하여 data 불러오기

$store.state.이름