https://vuex.vuejs.org/#what-is-a-state-management-pattern
What is Vuex? | Vuex
What is Vuex? Pinia is now the new default The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in Vuex 5 RFC. You could simply consider Pinia as Vuex 5 with a different na
vuex.vuejs.org
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 |
https://vuex.vuejs.org/#what-is-a-state-management-pattern
What is Vuex? | Vuex
What is Vuex? Pinia is now the new default The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in Vuex 5 RFC. You could simply consider Pinia as Vuex 5 with a different na
vuex.vuejs.org
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 |