JavaScript 파일 종류

• state.js : 상태값을 저장하기 위한 파일
• actions.js : 비동기 처리를 할 때 호출할 함수 선언 → axios 사용 함수들!
• getters.js : store에 저장된 값을 가져오기 위한 함수 선언
• index.js : state.js, actions.js, getter.js, mutations.js 파일에 있는 변수, 함수를 하나의 객체로 묶는 역할
• mutations.js : state를 변경하기 위한 함수들 선언
  • 비동기 통신을 통해 얻어온 값으로 변경하기 위해서는 dispatch() 함수를 통해 action에 있는 함수를 호출해서 변경
  • 그렇지 않을 경우에는 commit() 함수를 실행해서 변경

로그인 시, AccessToken 저장 실습

0. index.js (따로 건들 필요는 없음)

각 파일들이 조립된 객체가 'root' 라는 이름으로 export됨을 확인하자

1. state.js 파일에 값을 저장할 변수 선언

로그인한 유저의 정보를 저장할 객체, loginUserInfo 선언

2. mutations.js 파일에 값을 설정할 set함수 선언

set함수를 통해 state.js에 선언한 loginUserInfo 변수에 받아온 값을 저장

3. getters.js파일에 저장된 값을 가져올 get함수 선언

state에 저장된 loginUserInfo 값을 반환하는 함수 선언

4. login-dialog.vue 파일에서 store에 값을 저장&가져오기 할 수 있다

// login-dialog.vue 파일

<script>
import { useStore } from 'vuex'

export default {
	setup(){
		const store = useStore();

		const clickLogin = function() {
			// 비동기 통신(axios)은 dispatch로 action 함수 실행
			store.dispatch('root/requestLogin', {id: id, password: password})
				.then(function(result){
					// 비동기 통신없이 일반 값을 저장하려면 commit으로 mutation 함수 실행
					store.commit('root/setLoginUserInfo', {'accessToken': result.data.accessToken})
					// getter함수를 통해 store에 저장된 값 꺼내오기
					console.log(store.getters['root/getLoginUserInfo'])
				})
				.catch(function (err)){
					alert(err)
				}
			}
	}
}

</script>