Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축하기 #2 Nuxt와 Rails 간의 소통 테스트

Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축 #1 환경 구축

axios 도입



URL 요청을 보낼 때는 axios를 사용합니다.
create_nuxt_app 때에 axios를 넣어야 합니다만, 만약 넣는 것을 실수하고 있었던 경우는 이하의 순서로 추가합니다.
$ yarn add @nuxtjs/axios

nuxt.config.js
export 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… 이게 뭐야? 생각할지도 모르지만,
  • store에 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/fetchListdispatch .
    앞서 언급했듯이 dispatch는 actions를 호출하므로 posts.jsactions 에 있는 fetchList 가 불리는 것입니다.

    한 번 견해를 알면 거기까지 읽는 것은 어렵지 않을 것입니다.

    Vuex는 규칙을 깨고 쓸 수 있고 그 경우 에러를 던지거나 하지 않습니다만, 결국 그렇게 되면 코드의 보수성은 내려갑니다. 그래서 위의 규칙에 따라 store의 직접 호출이나 재기록을 하지 않고, actions나 mutations로 제어해 갑시다.

    계속



    Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축 #3 개별 기사 페이지 작성
    연재 목차로

    좋은 웹페이지 즐겨찾기