[Vue] Vue 정리하기(9) - Pinia 알아보기 (Getters, Actions)

저번시간에 이어서

오늘은 Getters와 Actions에 대해 알아보겠다

 

---

Getters

 

getters는 vuex에서와 마찬가지로 store에 computed라고 생각하면 될거같다

먼저 store에서 어떻게 정의하는지 봐보자

일단 count라는 state값을 10으로 저장했고

타입은 넘버로 해줬다

 

굳이 타입 지정 안해줘도 되는데 그냥 한번 해봤다

원래 ts에서 변수 타입 선언할때

const count: number = 10

요렇게 하면 되는데 ref 쓸 때는 저렇게 하는것 같다

 

무튼 count값에 10을 저장하고

getters에 doubleCount를 정의해 줬다

 

컴포넌트에서 불러와서 쓰는거는 state를 불러와서 쓰는것과 같다

이런식으로 불러와서 쓰면 되는데

count값을 바꾸는 것 까지 시도를 해봤다

 

 

지금 화면은 이러한데 저 버튼을 누르면

이렇게 바뀌게 된다

 

근데 여기서도 알게된 사실이 하나 있는데

state 값 변경 할때 $patch를 써서 변경하는데

값을 아예 다른 값으로 바꿀거면 

store.$patch({greeting: "바뀐인사"})

이렇게 하면 됐는데

 

그 전 값을 이용해서 새로운 값으로 넣으려면 store.state명 으로 접근해야 한다는 사실을 알게되었다

store.$patch({count: store.count*3})

요렇게

 

---

Actions

 

action을 사용하려면 스토어에서 그냥 함수를 정의 해주면 된다

count값을 제곱하는 squareCount라는 actions을 정의 해주고

 

 

컴포넌트 에서는 store.squareCount() 이렇게 사용 해주면 된다

 

화면을 보자면

 

여기서 제곱하기 버튼을 누르면

요렇게 된다

 

근데 여기서 ㅋㅋㅋㅋㅋ

또잉? 하는사람이 있을수도 있다

 

20 제곱하면 400 이자나!!

근데 왜 200임??

 

코드를 자세히 보면 10이 count이고 20은 그냥 count에서 2배한 doubleCount라는 getter 값이기때문에

제곱하기를 눌러도 100 200 이렇게 나오는 거다

 

 

오늘은 getters와 actions에 대해 아주 간단하게 찍먹해 보았다

다음시간에는 더 발전해서 pinia에서 axios를 사용하는 방법에 대해 알아보겠다