06.Vuex (Store)

---

vuex 자세히 보기..

• Project 내에서 App.vue main component 아래에 여러가지 component 로 구성되어 있는데, 같은 데이터를 사용 하고 자 할때, Store 라는 저장소를 사용해서 공통된 데이터를 store 에 저장하고 그 데이터를 각 component 에서 가져와서 사용하는 것을 말함 -> Vue.js 에서는 Library 중 하나인 Vuex 를 사용합니다.

• Store 에 저장된 데이터를 한번에 관리하게 되고, 여러 Component 에서 가져와서 손쉽게 활용 할 수 있습니다.

Vuex Concept

• State: 컴포넌트간에 공유하는 데이터 data()

• View: 데이터를 표시하는 화면 template

• Action: 사용자의 입력에 따라 데이터를 변경하는 methods

Vuex 구조

Vuex는 state, mutations, action, getters 4가지 형태로 관리가 되며, 이때 이 관리 포인트는 store 패턴을 사용하고 통상 store라고 불립니다.

이 4가지는 서로간의 간접적으로 영향이 있으며 단방향 데이터 흐름으로 볼수 있습니다.

State

State는 Vue 컴포넌트에서 data로 볼 수 있다. 원본 소스의 역할을 하며, View와 직접적으로 연결되어있는 Model입니다.

이 state는 직접적인 변경은 불가능하고 mutation을 통해서만 변경이 가능합니다.

mutation을 통해 state가 변경이 일어나면 반응적으로 Vue가 업데이트됩니다.

Mutations

Mutation은 state를 변경하는 유일한 방법이고 이벤트와 유사합니다.

mutation은 함수로 구현되며 첫 번째 인자는 state를 받을 수 있으며, 두 번째 인자는 payload를 받을 수 있습니다.

여기서 payload는 여러 필드를 포함할 수 있는 객체형태도 가능합니다.

이 mutation은 일반적으로(Helper를 쓰지 않는 경우)는 직접 호출을 할 수 없으며, commit을 통해서만 호출할 수 있습니다.

Actions

Action은 mutation과 비슷하지만 mutation과는 달리 비동기 작업이 가능합니다.

또한 mutation에 대한 commit이 가능하여 action에서도 mutation을 통해 state를 변경할 수 있습니다.

action에서는 첫 번째 인자를 context 인자로 받을 수 있으며 이 context에는 state, commit, dispatch, rootstate와 같은 속성들을 포함합니다.

두 번째 인자는 mutation과 동일하게 payload로 받을 수 있습니다.

commit을 통해 mutation을 호출했다면 Action은 dispatch를 통해서 호출됩니다.

context의 속성을 보면 dispatch가 있는 것으로 보아 action에서는 서로 다른 action을 호출할 수 있다는 것을 볼 수 있습니다.

Getters

Getters는 쉽게 Vue 컴포넌트에서 Computed로 볼 수 있습니다.

말로 풀자면 계산된 속성인데 getter의 결과는 종속성에 따라 캐시 되고 일부 종속성이 변경된 경우에만 다시 재계산됩니다.

즉, 특정 state에 대해 어떠한 연산을 하고 그 결과를 View에 바인딩할 수 있으며, state의 변경 여부에 따라 getter는 재계산이 되고 View 역시 업데이트를 일으킵니다.

정리

• vue component -> 비동기 로직 -> 동기 로직 -> 상태

  • 시작점은 Vue Componets 입니다.

  • Component 에서 비동기 로직 (Method를 선언해서 API 콜 하는 부분) 인 Actions 를 불러내고,

  • Actions 는 비동기 로직만 처리할 뿐 State (Data) 를 직접 변경하진 않습니다.

  • Actions 가 동기 로직인 Mutations를 호출해서 State (Data) 를 변경합니다.

  • Mutations 에서만 State(Data) 를 변경할 수 있습니다.

• getters 는 state 에서 data를 가져와서 활용 하기만 함

• mutations 는 state 에서 data를 가져올 수 도 있도 state 로 data 를 보낼 수 도 있음

• 대부분 logic 이 작성되는 actions 부분에서는 state, getters, mutations 의 data를 모두 받아서 사용할 수 있습니다.

• 즉, 정리하자면 기본적인 store 에서 state 라는 곳에서 data를 저장해서 계산된 형태를 사용하고자 하면 getters 를 state 를 수정하기 위해서 mutation 을 , actions 에서 대부분 로직을 정의하여 사용합니다.

Vue component 에서 store 의 data 가져오기

🔶 🔷 📌 🔑

Reference

• vuex official page- https://next.vuex.vuejs.org/