Vuex의 개념 정리와 Vue3 버전에 적용되는 Vuex4 의 사용법 정리

Vuex 란?

Vuex는 Vue.js 를 위한 상태 관리를 위한 라이브러리
앱의 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙과 함께 애플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소 역할을 한다.

상태 관리 패턴이란?

단방향 데이터 흐름의 예시

<template>
	<div>{{count}}</div> 
	<!--View-->
</template>
<script>
export default{
    data(){
    	return{
       	    count:0 // State
        }
    },
    methods:{
     increment () { //Action
      	this.count++
     }
   }
}
</script>

State : 앱이 돌아가는 메인 상태
View : 상태에 대한 View 매핑상태
action : 반응(이벤트)에 따라 상태를 변환하는 방법

위 방법으로 가장 간단한 데이터의 흐름을 구현할 수 있다 그러나 위 방법은 한계가 있다

문제 1 : 하나의 State 여러 view에서 사용해야하는 경우
문제 2 : 다른 View에서 동일한 State를 변경해야하는 경우

문제 1의 경우 부모 자식 관계에선 props로 전달 할 수 있지만 형제간의 State의 전송은 작동할 수 없다.
문제 2의 경우 직접 부모/자식에게 변경된 State가 도달 하거나 이벤트를 통해 상태의 여러 복사본을 변경 및 동기화하려는 것은 솔루션에 의존하는 경우가 많다. 이러한 패턴은 깨지기 쉽고 유지 관리하기 어렵다.

상태 관리와 관련된 개념을 정의 및 분리하고 View와 State 간의 독립성을 유지하는 규칙을 적용하면 코드에 더 많은 구조와 유지성을 제공할 수 있다.

Vuex의 설계와 컨셉은 Flux, Redux, The Elm Architecture 가 참고되었다. 그리고 다른 패턴과는 달리 Vue.js 에 맞게 조정된 라이브러리이다.

소규모 프로젝트에선 Vuex 를 사용할 필요는 없지만 중규모를 넘어 갈 경우 상태관리에 어려움이 생길 것 이다.