38. Vue - vuex 개념 정리

1. Store

각 vue 컴포넌트에서 사용하는 데이터를 다른 컴포넌트와 공유하여 사용하기 위해서 store라는 하나의 데이터 창고를 형성하여 각 컴포넌트의 데이터를 보관한다.  

 

클릭하면 확대됩니다.

---

2. Store module

모듈이라는 분리된 저장공간을 만들어, 각 컴포넌트의 데이터를 따로 정리하여 보관할 수 있다. 

 

클릭하면 확대됩니다.

---

3. Store의 속성(option)개념 

클릭하면 확대됩니다. 

 

• namespaced: 스토어 모듈임을 명시하는 속성, boolean 
• state: 뷰 컴포넌트에서 사용되는 데이터
• getters: 뷰 컴포넌트의 computed()와 동일한 기능을 작성하는 부분 , 일방통행 - state 데이터를 읽기만 가능  
• mutations: 뷰 컴포넌트의 methods()와 동일한 기능을 작성하는 부분, 쌍방통행 - state 값 변경 가능 
• actions: 쌍방통행 함수(= methods)이 외의 함수를 작성하는 부분, 비동기적 처리가능,  일방통행 - state 데이터를 읽기만 가능, mutations에 작성되는 로직 외 대부분의 로직을 actions에 작성하는 것을 권장함. 

 

a. actions()의 데이터 접근방법

https://next.vuex.vuejs.org/guide/actions.html

Actions | Vuex

 

• context라는 매개변수를 통해 데이터 접근
• context의 객체 구조분해 → { state, getters, commit, dispatch }
• state: 어떤 스토어 모듈의 state에 접근하기 위한 함수 → context.state.이름
• getters: 어떤 스토어 모듈의 getters에 접근하기 위한 함수 → context.getters.이름
• commit: 어떤 스토어 모듈의 mutations에 접근하기 위한 함수 → context.commit.('함수명')
• dispatch: 어떤 스토어 모듈의 actions에 접근하기 위한 함수 → context.dispatch('함수명')

 

b. Vue 컴포넌트에서 Store에 접근하는 방법 

• state: $store.state.모듈명.state명
  ex) $store.state.about.name
• getters: $store.getters['모듈/getter명']
  ex) $store.getters['about/count']
• mutations: $store.commit('모듈/mutation명', 추가지정속성값)
  ex) $store.commit('movie/updateState')
• actions: $store.dispatch('모듈/action명', 추가지정속성값)
  ex) $store.dispatch('movie/searchMovies')

---

4. Vuex Helper

a) 뷰 컴포넌트의 computed() 속성에 작성

• state: ...mapState('모듈명', [state1, state2, ... ])
• getters: ...mapGetters('모듈명', [getter1, getter2, ...])

 

b) 뷰 컴포넌트의 methods() 속성에 작성

• mutations: ...mapMutations('모듈명', [mutation1, mutation2, ...])
• actions: ...mapActions('모듈명', [action1, action2, ...])