https://vuex.vuejs.org/#what-is-a-state-management-pattern
vuex 공식 문서이다.
근데 맨 위에 고정되어 있는 내용이 vuex보다 더 좋은 Pinia가 나왔으니 새 프로젝트를 만들 거라면 Pinia를 'Highly Recommend'한다고 한다...
하지만 당장에 우리 회사에서는 Vue2 + Vuex 3 조합을 사용하고 있으니 Vuex에 대해서 열심히 배워보도록 하자.
Vuex는 상태관리 도구이다. 리액트의 redux 같은 느낌이라고 생각해야 할 것 같다.
actions를 통해 api를 호출하여 데이터를 받아오고
받아 온 데이터를 먼저 mutations에 넣었다가
state에 집어넣어 주는 방식이다.
<사용 예시>
1. 먼저 store라는 폴더를 만들고 그 안에 index.js를 만든다.
2. index.js 에서 Vuex 를 임포트해주고 Vue.use(Vuex) 해서 Vuex를 사용하겠다 선언한다.
3. Vuex의 가족들인 state, mutation, action을 담기 위해 store라는 집을 만들어준다.
4. 당연 store는 밖에서 가져다 써야하기 때문에 export 해준다.
5. ** actions 안에 api 호출 함수를 임포트하여 넣어주어야 하는데 대문자 이름으로 함수를 만들어서 감싸주어야 한다.
6. 이 때 함수의 인자는 context가 들어가야 한다. 이 context를 통해 mutation을 컨트롤 할 수 있다.
7. context.commit('mutation이름', 전달할 데이터) 형식으로 mutation에 데이터를 전달한다.
8. mutation 안에는 마찬가지로 SET_AMOLANG 처럼 대문자 형식으로 state의 값을 설정한다는 의미로 함수를 만들어준다.
9. 이 때 SET_뭐시기(state, 넣을 데이터) 형식으로 함수를 만들어서 state에 값을 전달할 수 있게 된다.
10. 이렇게 만들어낸 녀석들을 vue 페이지에서 $store.state, $store.dispatch('action안에 만든 놈') 형태로 갖다 쓸 수 있다.
예시 코드를 넣고 싶지만 돈 주고 듣는 강의라 그대로 올릴 수가 없어서 코드는 생략하도록 하겠다...
나중에 개인적으로 예시를 만들어서 올리겠음.
'Front-end > Vue' 카테고리의 다른 글
Vue CLI 2.x vs 3.x (0) | 2022.04.09 |
---|---|
6. 실제 데이터 import / export 하기 (0) | 2022.04.02 |
5. 모달창 만들기 (0) | 2022.04.02 |
4. 이벤트 핸들러와 함수 만들기 (0) | 2022.04.02 |
3. 반복문 (0) | 2022.04.02 |