현재 상황
: api 데이터를 axios로 불러와 각 component들에 뿌려줌
구현하고 싶은 것
: news, ask 카테고리안에 있는 데이터들 중에
title 옆 작성자를 클릭하면 작성자 정보가 나오는 페이지 구현
1. UserView.vue 컴포넌트 생성
2. NewView.vue에 출력한 작성자 클릭 시 작성자 정보가 넘어갈 수 있게끔
router-link를 통해 userId를 router에 보내줌
<template>
<div>
<p v-for="item in this.$store.state.news" :key="item">
<a v-bind:href="item.url">{{ item.title }}</a>
<small>{{item.time_ago}} by
<router-link :to="`/user/${item.user}`"> {{item.user}} </router-link>
</small>
</p>
</div>
</template>
Q. a 태그 안에 href로 잡아주는것과 router-link를 사용하는것과는 어떠한 차이가 있나요?
A. 뷰 라우터를 사용하실 때 a 태그가 아닌 router-link 태그를 사용하셔야 라우터에서 제공하는 속성과 API를 모두 사용하실 수 있습니다 :)
3. routes 폴더의 index.js에 UserView 컴포넌트 및 path 등록
import Vue from 'vue';
import VueRouter from 'vue-router';
import UserView from '../views/UserView.vue'
Vue.use(VueRouter);
export const router = new VueRouter ({
mode : 'history', //url # 없애는 코드
routes : [
{
path : '/user/:id',
component : UserView
},
]
});
*Userview path 에 id값을 받아올 수 있도록 변수 정의해둠
ex) path : '/user/:id'
3. UserView.vue component에서 router params를 통해 전달받은 userId를
dispatch를 통해 store의 actions에 전달해줌
<script>
export default {
created(){
const userId = this.$route.params.id;
this.$store.dispatch('FATCH_USERS', userId)
}
}
</script>
4. actions.js에서 전달받은 userId값을 api에 넘겨주고 userId와 일치하는 api 데이터 값을 받아옴
-actions.js
import { fetchUserInfo } from '../api/index.js'
export default {
FATCH_USERS(context, userId){
fetchUserInfo( userId )
.then(response => context.commit('SET_USERS', response.data))
.catch(error => console.log(error))
}
}
-api폴더 index.js
import axios from 'axios';
//1. HTTP Request & Response와 관련된 기본 설정
const config = {
baseURL : 'https://api.hnpwa.com/v0/'
};
function fetchUserInfo(userId){
return axios.get(`${config.baseURL}user/${userId}.json`)
}
export {
fetchUserInfo
}
5. 데이터를 전달받은 mutations에서 state 데이터 값을 변경해줌
export default {
SET_USERS(state, userData){
state.user = userData;
}
}
6. UserView.vue component로 돌아와 전달받은 데이터를 화면에 뿌려줌
<template>
<div>
<p> name : {{userInfo.id}} </p>
<p> created : {{userInfo.created}} </p>
<p> karma : {{userInfo.karma}} </p>
</div>
</template>
<script>
//import axios from 'axios';
export default {
computed : {
userInfo(){
return this.$store.state.user;
}
},
created(){
const userId = this.$route.params.id;
this.$store.dispatch('FATCH_USERS', userId)
}
}
</script>
-출력 화면
'SPA > Vue' 카테고리의 다른 글
axios를 이용한 api호출 vuex로 모듈화 하기 (예시O) (0) | 2021.05.11 |
---|---|
axios의 api 함수 구조화 방법 [예시O] (0) | 2021.05.11 |
vue.js axios 설치 및 간단한 API 등록 (0) | 2021.05.10 |
vuejs 라우터 설치 및 구현 (0) | 2021.05.10 |
Vue CLI 2.x / CLI 3.x 비교 (0) | 2021.05.10 |