vue에서 axios사용하기 3

이제 action을 사용해서 지금까지 만든 기능을 리팩토링 해보려고한다.

 

지금까지 만들었던 방식은 methods에서 api에 요청을 보내면 api에서(api/auth.js login) 정보를 받아온 뒤 여기서 state에 commit하여 state를 저장했던 방식이다.

 

지금 해볼 것은

methods에서 action에 정의한 함수를 dispatch로 실행하면서 payload를 넘겨준다. action에서는 이를 받아서 api에 요청을 보낸 뒤 받아온 값을 같은 폴더에 있는 mutaion으로 commit을 보낸다.

 

즉 method에서는 action을 dipatch보내는 것 하나,

api에서는 단순히 요청을 보내는 것만.

 

action에서 이 api를 사용하여 받아온 값을 commit하여 state에 저장하는 역할을 수행!

 

api/auth.js 의 login 함수는 보내는 역할만 하도록 수정

로그인 버튼을 누르면 정보를 담은 dispatch가 가고,

그걸 받아서 오류가 없다면 state상태를 변경시킴

이렇게 비동기 역할(api/auth의 login함수)의 코드는 action에서 실행시켜줘야한다고 한다.