Vuex store

Vuex Store

• State

  • 프로젝트에서 공통으로 사용할 변수를 정의
  • 프로젝트 내의 모든 곳에서 참조 & 사용 가능
  • state를 통해 각 컴포넌트에서 동일한 값을 사용할 수 있다.

• Mutations

  • state를 변경시키는 역할
  • 따라서, Mutations를 이용해서만 state를 변경해야한다.
  • 동기 처리(비동기 처리 X)
  • 위의 함수가 실행되고 종료된 후 그 다음 아래의 함수가 실행된다.
  • commit('함수명', '전달 인자')로 실행
    • 
    • 이 때, created 함수는 arrow function이 아니라 created(): function() {} 의 표현을 해줘야한다. arrow function의 내부 this는 메소드를 소유한 객체를 가리키지 않고 상위 컨텍스트인 전역 객체 windows를 가리킨다. 따라서, ES6의 축약 메소드를 사용해서 vue의 instance를 가리키는 것이 좋다.

• Actions

  • Mutations를 실행하는 역할
  • 비동기 처리(동기 처리 X)
  • 순서에 상관 없이, 먼저 종료된 함수의 피드백을 받아 후속 처리를 한다.
  • dispatch('함수명', 전달인자)로 실행
    • dispatch('Foo', somethingForState)
  • actions 내에 함수 형태로 작성
  • 비동기 처리 => 콜백함수로 작성
  • Actions 실행 -> mutation 실행 -> state 변경 이라 생각하면 된다.

• Getters

  • 각 Components의 계산된 속성의 공통 사용 정의
  • 여러 Components에서 동일한 계산된 속성이 사용될 경우 Getters에서 정의해서 공통으로 쉽게 사용 가능
  • 하위 모듈의 getters를 불러오기 위해서는 this.$store.getters["경로명/함수명"];을 사용

• 상위 모듈의 dispatch, commit 실행 시키는 방법

  • 하위 모듈에서 형제 or 부모 모듈의 state에 접근하기 위해서는 rootState를 사용
  • Mutations나 Actions 실행 같은 경우는, 세번째 인자에 {root:true}를 지정해주면 됨
    • dispatch('Foo', 'something', {root:true})

---

Reference

• https://uxgjs.tistory.com/149