[Vuex] 기본 사항

Vuex

• 말하자면, 전역변수 관리 라이브러리

state

• 말하자면, 클래스의 필드에 해당
• 직접 호출은 가능하지만 직접 수정은 불가능
  • 애플리케이션 전역에서 공용으로 사용되는 값들이기 때문에
    어떤 과정에서 무엇에 의해 값이 변경되었는지 추적할 수 있게 하기 위함이라고 함
• state의 직접호출은 this.$store.state.변수명 등으로 할 수 있음

getter

• 말하자면, Vue의 computed 속성에 해당
• state에 저장된 값을 변경하지 않고 가공하여 출력할 때 사용
  • 즉, 가공이 필요 없다면 직접호출 하면 됨
• 예:

  const getters = {
    getFullName(state) {
      return `${state.firstName} ${state.lastName}`;
    },
  };

mutation

• 말하자면, 클래스의 setter와 비슷
• state의 값을 수정하는 방법을 정의하는 함수들
• 반드시 동기적이어야 하며, commit 함수로 실행함
  • 예: this.$store.commit('myMutation'[, payload]);

action

• 말하자면, 클래스의 method에 해당?
  • mutation commit을 포함
    • 안 해도 되겠지만 의미가 있나...?
• 비동기 처리 가능
• dispatch 함수로 실행
  • 예: this.$store.dispatch('myAction'[, payload])

---

참고한곳

• Vuex 공식 문서 @ Vuex