[Vuex]1. Vuex 란 ?

Vuex

Vue.js  어플리케이션에서 상태 관리 패턴을 지원하는 라이브러리이다.

애플리케이션 내부의 모든 컴포넌트들이 공유하며, 사용되는 state 가 모두 담겨있는 저장소의 역할을 한다.

이 state들은 전역에서 store 라는 객체를 통해 관리한다.

 

Vuex를 사용하지 않는 경우, 부모에서 자식으로 props 를 이용해 속성을 전달해야하는 번거로움이 있지만, 

Vuex를 사용함으로서 이런 번거로움에서 벗어날 수 있다.

 

의 그림을 보면 화살표가 한방향으로만 흘러간다. "단방향 데이터 흐름"이라는 용어를 쓰는데 전체적인 처리 흐름은 다음과 같다.

 

1) 컴포넌트가 action을 일으킨다.(버튼 클릭 이벤트 같은)

2) 액션에서는 외부 API를 호출한 뒤 그 결과를 이용해 변이(mutation)을 일으킨다. ( action 으로 mutation 이 일어난다고 생각하자 )

3) mutation에서는 액션의 결과를 받아 state를 설정한다. 이단계는 추적할 수 있기 때문에 vue.js Dev Tool을 이용하면 상태 변경의 내역을 모두 확인할 수 있다.

4) mutation에 의해 변경된 state는 다시 컴포넌트에 바인딩되어 화면을 갱신한다.

 

위의 그림에서 점선으로 표시된 영역이 Vuex 저장소(store) 객체 영역이다. 저장소가 상태(State:데이터), 변이(Mutation), 액션(Action)을 모두 관리한다. 저장소는 애플리케이션의 상태를 중앙집중화하여 관리한는 컨테이너이며 일반적인 전역 객체와는 달리 저장소안에있는 상태를 직접 변경하지 않는다. 반드시 변이를 통해서반 변경한다.

 

State 와 mutation

 

State 와 mutation 은 store 내부의 핵심 요소이다. 

 

State

• Application 에서 관리하는 data

Mutation

• Store 안에있는 State 는 직접 변경이 불가능하고 ,꼭 이 mutation 이라는 객체를 통해서 변경이 가능.
• 비동기 처리가 아니라 동기처리를 한다.
• 외부에서 this.$store.commit ( '함수명', '전달인자' ) 로 실행시킬 수 있다.

잘은 모르지만 React 에서 함수형 컴포넌트 경우에 state 를 useState 라는 Hook 을 사용해서만 접근할 수 있는데 이거랑 비슷한 역할인거 같다.

 

현재 내가 공부하고있는 vuexy 에서도 Vuex 를 사용한다.

 

전역에서 Vue.use(Vuex) 라는 코드를 실행하면, application 내부의 모든 컴포넌트가 store 의 state , mutation 객체에 접근이 가능하다.

 

원래는 state 와 mutation 정보를 가지고 있어야하는데 엥 ? modules 와 strict 가 보인다.

찾아보니 state 가 너무너무 많아질 경우 modules 라는 속성에 모듈식으로 state 를 퉁 묶어 관리한다고 한다.

 

쉽게 설명하면 Store 라는 하나의 큰 저장소를 module 별로 나눠둔거라 생각하면 된다.

 

그래서 실제로 app이라는 모듈 안에 index.js 안으로 들어가보면

 

이렇게 우리가 찾던 state 와 mutations 를 확인할 수 있다 ! ( getters 도 있는데 이건 나중에 알아보자.. )

 

위에서 설명했듯이,

state 에는 windowWidth, shallShowOverlay 두가지 변수가 존재하고,

이 변수를 직접 조작하지 못하니 mutations 을 살펴보면 UPDATE_WINDOW_WIDTH, TOGGLE_OVERLAY 라는 함수를 통해 각각의 변수에 접근하는 모습을 볼 수 있다 !

 

mutations 의 함수를 더 자세히 살펴보자면 ,

함수의 첫번째 인자는 변경할 state 이고, 두번째 인자는 payload, 즉 데이터 타입이다.

 

그럼 이렇게 만들어진 store를 main.js 에서 사용해야한다.

main.js

이렇게 Vue 객체 안에 store를 넣으면 이제 store 의 객체를 this.$store 로 접근할 수 있다.

 

App.vue

App.vue 코드를 잘 보면 computed 안에 함수에서 this.$store 로 store 객체에 접근하는 모습을 볼 수있다.

 

 

이렇게 State 를 한번에 모아 저장해두고 쉽게 접근할 수 있게 만들어주는게 바로 Vuex다.

단, State 가 하나의 컴포넌트에서 사용되거나 굳이 중요한 State 가 아니라면 이렇게 Store 에 따로 관리하지 않아도 된다. Vuex가 유용한 경우는 여러 컴포넌트가 State 데이터를 공유하는 경우다.