Vuex란 무엇인가?

Vue.js라는 언어를 가지고 웹 개발을 하는 사람들에게 Vuex는 반드시 사용되어야 할 편리한 도구이다. 최근 Pinia라는 Vue.js의 공식 상태 관리 라이브러리가 새롭게 개발되어 이제 아니 앞으로 Vuex 사용이 점차적으로 줄어들 테지만, 우리는 그래도 Pinia로 넘어가기 전에 Vuex를 반드시 알 필요가 있다. Pinia와 기능이 크게 다르지 않기 때문에.

 

그래서 공식문서와 내가 따로 유튜브 영상으로 만들어 놓은 자료가 있으니 한 번 참고해주길 바란다.

 

https://www.youtube.com/watch?v=A3vmGPdXlyA

 

https://vuex.vuejs.org/#what-is-a-state-management-pattern

What is Vuex? | Vuex

공식문서를 살펴보니 Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리라고 한다. 이는 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙과 함께 애플리케이션의 모든 구성요소에 대한 중앙집중식 저장소 역할은 한다고 한다. 말이 너무 어려우니 조금 쉽게 풀어서 이해해보도록 하자.

 

Vuex를 사용하지 않고 일반적인 Page View에서 API(Application Programming Interface)를 호출할 때, Vue.js 라이프사이클 훅인 created 혹은 mounted 부분에 호출하곤 한다. 그러나 같은 API를 동시다발적으로 사용할 경우에는 API를 호출하는 코드를 반복해서 작성해야 하는 번거로움이 있다. 물론, 복사 붙여 넣기 하면 된다고 하면 크게 할 말은 없다만, 그만큼 리소스가 커지기 때문에 비효율적일 수 있다. 코드도 그만큼 길어지고 말이다. 또한, 부모 컴포넌트에서 호출한 API 데이터를 바로 아래 자식 컴포넌트에서 사용할 땐 한 번의 props로 데이터를 전달하면 되지만, 뎁스가 깊어지면 수많은 props로 데이터를 전달해줘야 하기 때문에 여간 불편한 게 아닐 수 없다. 그래서 Vuex를 통해 공통적으로 사용되는 API는 중앙에서 관리하고 필요할 때만 호출하는 방식을 도입하게 된 것이다. 아래 그림이 이를 명시적으로 표현한 것이다.

공통의 상태를 공유하는 여러 컴포넌트가 있는 경우, 지나치게 중첩된 컴포넌트를 통과하는 props 데이터들은 유지 보수하기 어려울뿐더러 읽기 힘든 난해한 코드가 될 수 있다는 점에서 Vuex를 사용하게 됐다는 점을 기억하면서 다음 단계로 넘어가 보도록 하자.

 

Vuex에는 4가지 속성이 있는데 state, getters, mutations, actions 이렇게 4가지이다. 각 역할은 다음과 같다.

• state : 변수들의 집합 (실제 우리들이 사용하는 데이터)
• getters : computed와 같은 기능을 한다고 이해
• mutations : state의 데이터를 조작 및 변경
• actions : 비동기 처리를 하는 함수들의 집합 (API 호출)

 

state는 컴포넌트 간에 공유할 data 속성을 의미한다. 즉, 우리가 사용될 데이터를 정의하는 부분이다. 각 컴포넌트에서 우리가 보통 사용했던 data 속성과 동일하다. Vuex에서 선언한 state를 각 컴포넌트에서 접근할 때는 '$this.store.state. 변수 이름'으로 접근한다.

 

getters는 Vuex Store 구조에서 발생하는 문제점(?) 중 하나가 각 컴포넌트에서 Vuex의 데이터에 접근할 때 그 접근한 데이터를 매번 computed로 동일한 계산된 데이터 형식으로 가공해야 할 때가 있다. 그런 것들을 차라리 애초에 처리해서 전달하면 좋다고 생각할 때가 있는데 이런 작업들은 getters에서 작업을 직접 해버리고 '$this.store.getters. 변수 이름'으로 접근한다.

 

mutations는 Vuex의 데이터 즉, state 값을 변경하는 로직을 의미한다.

Getters와 얼핏 비슷해보이나 본질적으로 다르다. mutations와 getters의 차이점은

• mutations에선 인자를 받아 Vuex에 넘겨줄 수 있으며
• computed가 아닌 methods에 등록을 한다.

 

actions와의 차이점으로는

• mutations는 동기적으로 로직을 구현하고
• actions는 비동기적으로 로직을 구현한다.

 

Mutations의 성격상 안에 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수가 있기 때문이다. mutations을 컴포넌트에서 사용할 때는 methods 부분에서 $this.store.commit('Vuex에서 정의한 이름')으로 접근하여 사용하면 된다. actions를 컴포넌트에서 사용할 때는 $this.store.dispatch('Vuex에서 정의한 이름')으로 접근하여 호출하면 된다.

 

아래 참조한 링크를 클릭해서 보면 더 자세하게 알 수 있다.

 

https://www.bottlehs.com/vue/vue-js-vuex-state-mutations-actions-getters-%EC%9D%B4%ED%95%B4-%EB%B0%8F-%ED%99%9C%EC%9A%A9/

Vue Js Vuex State, Mutations, Actions, Getters 이해 및 활용