Vue2 의 상태관리 도구 Vuex 3.x

2022. 4. 23. 19:30· Front-end/Vue

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
'Front-end/Vue' 카테고리의 다른 글
  • Vue CLI 2.x vs 3.x
  • 6. 실제 데이터 import / export 하기
  • 5. 모달창 만들기
  • 4. 이벤트 핸들러와 함수 만들기
Purewater
Purewater
Purewater
프로그램 공부 일기장
Purewater
전체
오늘
어제
  • 분류 전체보기 (237)
    • Front-end (8)
      • Vue (8)
    • 포트폴리오 (3)
      • JSP SHOP (1)
      • Travelanner (1)
      • OAuth2 Blog (1)
    • 취업 준비 (70)
      • Spring boot (43)
      • JPA (1)
      • Spring security (14)
      • React (11)
      • 면접 기록 (1)
    • 국기훈련과정 (57)
      • JAVA 복습노트 (12)
      • Oracle SQL (9)
      • Web (15)
      • JSP (6)
      • Spring (10)
      • 프로젝트 (4)
      • Python (1)
    • 알고리즘 문제풀이 (17)
      • Python3 (13)
      • Kotlin (4)
    • 이것저것 지식 (9)
    • 클라우드 서버 (7)
      • Linux (7)
    • Backend (20)
      • node.js (9)
      • JAVA (6)
      • spring boot (5)
    • DB (1)
      • SQL (1)
    • 잡담 (1)
    • 강의 수강 (1)
    • CS 지식 (41)
      • 디자인패턴 (6)
      • 네트워크 (22)
      • 데이터베이스 (4)

블로그 메뉴

  • 대문
  • 태그
  • 방명록
  • 글쓰기

공지사항

인기 글

태그

  • 디자인패턴
  • Kotlin
  • node.js
  • js
  • gitignore
  • 자바스크립트
  • node
  • spring
  • JPA
  • git
  • PostgreSQL
  • 오라클
  • Postman
  • GUI
  • SQL
  • Oracle
  • db
  • Java
  • redis
  • 노드

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
Purewater
Vue2 의 상태관리 도구 Vuex 3.x
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.