← 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/fetchList 의 dispatch .
앞서 언급했듯이 dispatch는 actions를 호출하므로 posts.js 의 actions 에 있는 fetchList 가 불리는 것입니다.

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

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

계속

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