Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축하기 #2 Nuxt와 Rails 간의 소통 테스트
axios 도입
URL 요청을 보낼 때는 axios를 사용합니다.
create_nuxt_app 때에 axios를 넣어야 합니다만, 만약 넣는 것을 실수하고 있었던 경우는 이하의 순서로 추가합니다.
$ yarn add @nuxtjs/axios
nuxt.config.jsexport default {
** Nuxt.js modules
*/
modules: [
+ '@nuxtjs/axios'
],
API와의 소통 테스트
pages/index.vue Welcome to the Vuetify + Nuxt.js template
</v-card-title>
<v-card-text>
+ <ul>
+ <li v-for="post in posts" :key="post.id">
+ {{ post.subject }}
+ {{ post.body }}
+ </li>
+ </ul>
...
components: {
Logo,
VuetifyLogo
+ },
+ async asyncData({ $axios }) {
+ const response = await $axios.$get('/v1/posts');
+ return {
+ posts: response.posts
+ };
}
}
</script>
잡음이지만 Rails의 seed로 만든 데이터를 무사히 얻을 수 있었군요.
우선 이것으로 프런트 엔드와 백엔드의 제휴 확인은 잡았습니다.
Vuex로 다시 쓰기
특히 룰 없이 기술해 가는 것도 가능합니다만, Vuex를 이용해 써 갑니다.
Vuex는 Vue.js 응용 프로그램에 대한 상태 관리 패턴 + 라이브러리입니다. 이것은 예측 가능한 방법에 의해서만 상태의 돌연변이를 실시한다고 하는 룰을 보증해, 어플리케이션내의 모든 컴퍼넌트를 위한 집중형의 스토어로서 기능합니다. 또한 Vue 공식 개발 도구 확장과 연계하여 설정 없이 시간 여행 디버깅 및 상태 스냅샷 내보내기 및 가져오기와 같은 고급 기능을 제공합니다.
문장 · 이미지 인용 : Vuex 란 무엇입니까? | Vuex
문장을 읽거나 이미지를 딱 본 것만으로는 좀처럼 이해하기 어려울지도 모릅니다.
actions 야 mutations 야 dispatch, commit… 이게 뭐야? 생각할지도 모르지만,
$ yarn add @nuxtjs/axios
export default {
** Nuxt.js modules
*/
modules: [
+ '@nuxtjs/axios'
],
pages/index.vue
Welcome to the Vuetify + Nuxt.js template
</v-card-title>
<v-card-text>
+ <ul>
+ <li v-for="post in posts" :key="post.id">
+ {{ post.subject }}
+ {{ post.body }}
+ </li>
+ </ul>
...
components: {
Logo,
VuetifyLogo
+ },
+ async asyncData({ $axios }) {
+ const response = await $axios.$get('/v1/posts');
+ return {
+ posts: response.posts
+ };
}
}
</script>
잡음이지만 Rails의 seed로 만든 데이터를 무사히 얻을 수 있었군요.
우선 이것으로 프런트 엔드와 백엔드의 제휴 확인은 잡았습니다.
Vuex로 다시 쓰기
특히 룰 없이 기술해 가는 것도 가능합니다만, Vuex를 이용해 써 갑니다.
Vuex는 Vue.js 응용 프로그램에 대한 상태 관리 패턴 + 라이브러리입니다. 이것은 예측 가능한 방법에 의해서만 상태의 돌연변이를 실시한다고 하는 룰을 보증해, 어플리케이션내의 모든 컴퍼넌트를 위한 집중형의 스토어로서 기능합니다. 또한 Vue 공식 개발 도구 확장과 연계하여 설정 없이 시간 여행 디버깅 및 상태 스냅샷 내보내기 및 가져오기와 같은 고급 기능을 제공합니다.
문장 · 이미지 인용 : Vuex 란 무엇입니까? | Vuex
문장을 읽거나 이미지를 딱 본 것만으로는 좀처럼 이해하기 어려울지도 모릅니다.
actions 야 mutations 야 dispatch, commit… 이게 뭐야? 생각할지도 모르지만,
state
, mutations
, actions
의 3개(+ getters
의 4개)를 가지고 각각을 호출하는 패턴 state
는 값을 가지는 것만 mutations
는 state 값을 설정하기 만하면됩니다 actions
에서 처리하고 상태를 변경할 때 직접 상태를 호출하지 않고 mutations를 호출합니다.getters
는 state의 값을 얻는다.mutations
를 부르는 것을 commit
라고 한다 actions
를 부르는 것을 dispatch
라고 한다 됩니다.
우선 다음과 같이 파일을 편집합니다.
store/posts.js
export const state = () => ({
posts: []
})
export const getters = {
posts (state) {
return state.posts
}
}
export const mutations = {
setPosts (state, data) {
state.posts = data
}
}
export const actions = {
async fetchPosts () {
return await this.$axios.$get('/v1/posts')
}
}
pages/index.vue
<template>
<v-layout
column
justify-center
align-center
>
<v-flex
xs12
sm8
md6
>
<v-card v-for="post in posts" :key="post.id">
<v-card-title class="headline">
{{ post.subject }} - {{ post.user.name }}
</v-card-title>
<v-card-text>
{{ post.body }}
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
async fetch ({ store }) {
const posts = await store.dispatch('posts/fetchPosts')
store.commit('posts/setPosts', posts.posts)
},
computed: {
posts () {
return this.$store.getters['posts/posts']
}
}
}
</script>
store 디렉토리 아래에 있는 파일은 {파일 이름}/{함수 이름}으로 네임스페이스가 잘립니다.
어떻게 처리되는지의 흐름은 위의 2 파일에 1-8로 주석을 기재하고 있습니다.
첫째로
const posts = await store.dispatch('posts/fetchList') // 1
에의한 posts/fetchList
의 dispatch
.앞서 언급했듯이 dispatch는 actions를 호출하므로
posts.js
의 actions
에 있는 fetchList
가 불리는 것입니다.한 번 견해를 알면 거기까지 읽는 것은 어렵지 않을 것입니다.
Vuex는 규칙을 깨고 쓸 수 있고 그 경우 에러를 던지거나 하지 않습니다만, 결국 그렇게 되면 코드의 보수성은 내려갑니다. 그래서 위의 규칙에 따라 store의 직접 호출이나 재기록을 하지 않고, actions나 mutations로 제어해 갑시다.
계속
→ Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축 #3 개별 기사 페이지 작성
【 연재 목차로 】
Reference
이 문제에 관하여(Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축하기 #2 Nuxt와 Rails 간의 소통 테스트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rf_p/items/34cc453c7c232e07a1d7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축하기 #2 Nuxt와 Rails 간의 소통 테스트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rf_p/items/34cc453c7c232e07a1d7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)