Vuex - (1)

🔥 [Vuex 공식문서](https://vuex.vuejs.org/)를 참고하여 학습한 자료입니다. 더 자세한 내용은 공식문서를 참고해 주세요.

What is Vuex?

Vuex는 Vue.js 애플리케이션의 상태관리 패턴 + 라이브러리.

컴포넌트에서 사용할수 있게 중앙집중적인 Store를 제공한다.

Store는 state를 변경할 수 있는 유일한 수단과, 예측 가능한 변화 패턴을 보장한다.

What is “State Mangaement Pattern”?

• State → 애플리케이션에서 사용되는 Source
• View → State의 선언적 매핑...?, state가 보여지는 걸 말하는 것 같음
• Actions → View에서 발생한 input에 대해서 state를 바꾸는 행위.

→ 위 세가지의 순환을 ‘one-way data flow’라고 한다.

이 단순한 패턴은 ‘multiple components가 공통의 state를 공유하게 되면 무너진다.

1. 여러 View가 같은 종류의 state를 가지고 있다.
2. 여러 View에 존재하는 Action이 같은 종류의 state를 변형시킨다.

1번 문제는 깊게 얽혀있는 컴포넌트에 props가 전달될 수 있다. 그리고 일반적으로 형제 컴포넌트에는 값이 전달될 수 없다.

2번 문제는 직접 부모 또는 자식의 인스턴스를 참조해서 사용하거나, 이벤트를 통해 이 인스턴스를 복사하여 변경하고 동기화하는 방식을 많이 사용한다. 이 방식은 쉽고 빠르게 유지보수하기에 좋은 코드는 아니다.

각 컴포넌트 내에서 값을 공유하는 코드를 제거하고,

인스턴스를 특정 컴포넌트에서 관리하는 것이 아니라 한 곳에서 관리함으로서 컴포넌트 트리의 어떤 컴포넌트에서도 동일하게 접근할 수 있도록 하는 방식을 사용하여 위 두가지 문제를 해결할 수 있다.

또한 상태관리의 개념을 정의하고 분리하여 상태간 독립성을 유지하는 규칙을 적용함으로써 코드의 유지 보수성을 향상 시킬 수 있다.

When Should I Use it?

• 프로덕트의 크기가 클 때 효과가 더 커진다.
• 부모/자식 관계에서 그 깊이가 깊어질때 사용하면 효과적