Vue의 전역 상태관리 라이브러리 VueX

- 중앙 집중식 저장소를 두고 데이터 관리 및 상태 관리를 할 수 있도록 해주는 상태 관리 패턴 라이브러리
- store는 애플리케이션 상태를 저장하고 있는 컨테이너

 

주요 개념

Store

• 애플리케이션 상태를 저장하는 컨테이너로, src/store.js를 생성해서 스토어를 정의
• 정의한 store를 main.js에서 `app.use(store)`의 방식으로 등록
• 등록이 완료되면 스토어를 사용하고 싶은 컴포넌트에서 this.$store.state로  정의한 state에 접근 가능

getter

• store의 getter에 정의된 값에 접근할 수 있도록 해줌
• 사용하고자 하는 컴포넌트에서 `this.$store.getter.[접근하고자 하는 요소]`로 접근 가능

mutation

• state를 변경시키는 역할
• 컴포넌트에서 사용할 때는 this.$store.commit("[함수명]")으로 사용해야 함(mutation X!!!)

actions

• 역할은 mutations와 유사함
• action을 통해 mutations에 정의된 함수를 실행할 수 있음
• commit와 다른 점은 비동기 처리가 가능하며, 여러 개의 mutations을 실행할 수 있다는 점임