[Vue] Vuex 실습

Object method shorthand

• 이제부터는 객체 메서드 축양형을 사용할 것 !

 

목차

1. state
2. getters
3. mutations
4. actions

 

---

 

1. state

 

state

 

• 중앙에서 관리하는 모든 상태 정보
• $store.state로 접근 가능
• store의 state에 message 데이터 정의

 

• component에서 state 사용

 

• $store.state로 바로 접근하기 보다 computed에 정의 후 접근하는 것을 권장

 

• Vue 개발자 도구에서의 Vuex
• 관리 화면을 Vuex로 변경 후 관리 되고 있는 state 확인 가능

 

---

 

2. actions

 

• state를 변경할 수 있는 mutations 호출
• component에서 dispatch()에 의해 호출됨
• dispatch(A, B)
  • A : 호출하고자 하는 actions 함수
  • B : 넘겨주는 데이터(payload)
• actions에 정의된 changeMessage 함수에 데이터 전달하기
• component에서 actions는 dispatch()에 의해 호출 됨

 

• actions의 첫 번째 인자는 context
  • context는 store의 전반적인 속성을 모두 가지고 있으므로 context.state와 context.getters를 통해 mutations를 호출하는 것이 모두 가능
  • dispatch()를 사용해 다른 actions도 호출할 수 있음
  • 단, actions에서 state를 직접 조작하는 것은 삼가야 함
• actions의 두 번째 인자는 payload
  • 넘겨준 데이터를 받아서 사용

---

3. mutations

 

• "actions에서 commit()을 통해 mutations 호출하기"
• mutations는 state를 변경하는 유일한 방법
• component 또는 actions에서 commit()에 의해 호출 됨

 

• commit(A,B)
  
  • A : 호출하고자 하는 mutations 함수
  • B : payload

 

• mutations는 state를 변경하는 유일한 방법
• 첫 번째 인자 state
• 두 번째 인자 payload

---

 

4. getters

 

"getters 사용해 보기"

• getters는 state를 활용한 새로운 변수
• getters 함수의 
  • 첫 번째 인자는 state
  • 두 번째 인자는 getters

 

• getters의 다른 함수 사용

 

"getters 출력하기"

• getters 역시 state와 마찬가지로 computed에 정의해서 사용하는 것을 권장