Figma 예시

1. vuex에 프로필 정보 저장하기

<aside> 💡 내가 접근하는 유저 프로필 페이지에 담을 정보를 저장한다.

</aside>

State
userInfoName	`localStorage.getItem("userInfoName")
userInfoDetail	`JSON.parse(localStorage.getItem("userInfoDetail"))
userInfoName을 통해 api통신을 보내서 데이터를 받아온다.

setUserInfoDetail({ commit }, userInfoDetail) {
      commit("SET_USER_INFO_DETAIL", userInfoDetail);
      localStorage.setItem("userInfoDetail", JSON.stringify(userInfoDetail));
  },

// userInfoName 저장, 관련 내용 저장
setUserInfoName({ commit, dispatch }, userInfoName) {
commit("SET_USER_INFO_NAME", userInfoName);
localStorage.setItem("userInfoName", userInfoName);
axios({
  url: drf.accounts.profile(userInfoName),
  method: "get",
}).then((response) => {
  console.log(response.data);
  dispatch("setUserInfoDetail", response.data);
})

새로고침 해도 저장되어있기 위해 로컬 스토리지에 저장한다.
username 을 전달 받아 저장하고 유저의 프로필 정보를 받는 API를 보낸다.
- API 코드 (get요청시 데이터를 받는다.)
응답으로 받은 유저 프로필 페이지 데이터를 저장한다

위의 함수는 유저 정보를 보는 페이지를 클릭하면 실행되게 구현했다.

그런데! 만약 url을 직접 쳐서 접근한다면..?🤔그래서 UserProfileView에 도착하면 바로 실행되게 수정했다.

url에 있는 username을 가져온다.

router에 props: true 을 준다면 해당페이지에서 $route.parmas로 params를 가져올 수 있다.

created(){
	console.log(this.$route.params) // {username: admin}
}

그 결과, this.$route.parmas.username 을 통해 params에 위치한 데이터를 가져올 수 있다는 것을 알았다.