Vuex

설치 - $ npm install vuex@next

적용

• sotre 폴더 생성
• js 파일 생성
• import {createStore} from vuex
• Modules 만들기

main.js에 연결 use(store)
vue에 적용하는 라이브러리를 연결하는 용도

Vuex 구성요소(옵션)

• namespaced - 전역으로 사용하길 원치 않을경우 true로 설정
• state - 상태, 즉 직접 사용할 데이터
• getters - 계산된 데이터, state값을 기반으로 계산할 경우!
• mutations - state 값을 바꿀 경우
• actions - 비동기 작업을 로직을 만들 경우

Store 사용

• mutations 실행할 때는 .commit() 메서드

• actions 실행할 때는 .dispatch() 메서드

• mutations를 통해서만 데이터 변경 가능!

• actions는 비동기로 동작함

Store 멤버간의 사용관계

• actions에서 함수를 만들 경우 두 가지 매개변수를 받는다.
  - 첫 번째 매개변수는 store 멤버 데이터를 받고

  • 두 번째 매개변수는 특정한 데이터를 받아 그 함수 내부에서 사용할 수 있음(즉, API 요청의 옵션들이라고 보면 된다.)

• mutations에서 멤버 데이터를 쓰려면 state.state, state.getters, state.commit 방식으로 사용 가능

• 보통 간단하게 사용하기 위해 state를 구조분해 할당해서 사용
  -> {state, getters, commit}

store 접근

• store 데이터를 사용하고 싶은 컴포넌트에서 this.$store를 통해 접근