←Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #5 ログイン・ログアウトの実装

はじめに

今回はNuxt編の最終回。
記事投稿フォームをindexに設置します。

ログインしていないと書き込めないので、ログイン中のみフォームを表示します。

Railsのレスポンスコード修正

まず下準備として、Rails側の修正漏れ箇所を直します。
postのsave失敗時、ステータスが200(正常)で返ってきてしまっておりエラーがキャッチできないので、レスポンスコードを422で返すようにします。

app/controllers/v1/posts_controller.rb

...
       if post.save
         render json: post
       else
-        render json: { errors: post.errors }
+        render json: { errors: post.errors }, status: 422
       end
     end
...
       if @post.update(post_params)
         render json: @post
       else
-        render json: { errors: @post.errors }
+        render json: { errors: @post.errors }, status: 422
       end
     end
...

postした時にNuxt側でtry catchを使っていますが、エラーが出てもレスポンスコードが200だとcatchブロックに行きません。ここは以前の設定ミスなのであらかじめ塞いでおきます。

pages/index.vueとstore/index.jsの修正

pages/index.vue

       sm8
       md6
     >
+      <form v-if="logged_in" @submit.prevent="newPost">
+        <v-card>
+          <v-card-title class="headline">
+            新規投稿
+          </v-card-title>
+          <v-card-text>
+            <ul v-if="errors">
+              <li v-for="(message, key) in errors" :key="key">
+                {{ key }}
+                <span v-for="(m, i) in message" :key="i">
+                  {{ m }}
+                </span>
+              </li>
+            </ul>
+            <v-text-field
+              id="subject"
+              v-model="subject"
+              label="subject"
+              name="subject"
+              prepend-icon="mdi-subtitles"
+            />
+            <v-textarea
+              id="body"
+              v-model="body"
+              label="body"
+              name="body"
+              prepend-icon="mdi-comment-text"
+            />
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn color="primary" type="submit">
+              投稿
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </form>
       <v-card v-for="post in posts" :key="post.id">
         <v-card-title class="headline">
           <n-link :to="`/posts/${post.id}`">
...
 <script>
 export default {
+  data () {
+    return {
+      subject: '',
+      body: '',
+      errors: []
+    }
+  },
   computed: {
     posts () {
       return this.$store.getters['posts/posts']
+    },
+    logged_in () {
+      return this.$store.getters.logged_in
+    }
+  },
+  methods: {
+    async newPost () {
+      try {
+        await this.$store.dispatch('posts/newPost', {
+          subject: this.subject,
+          body: this.body
+        })
+        this.subject = ''
+        this.body = ''
+        this.errors = []
+      } catch (e) {
+        this.errors = e.data.errors
+      }
+      const posts = await this.$store.dispatch('posts/fetchPosts')
+      this.$store.commit('posts/setPosts', posts.posts)
     }
   }
 }

エラーメッセージの表示箇所や、投稿後のposts再取得あたりがやっつけ感満載ですが。
やっていることはログインフォーム等と大差無いですね。

最後にstore/posts.jsにnewPostを定義して終わりです。

store/posts.js

 export const actions = {
   async fetchPosts () {
     return await this.$axios.$get('/v1/posts')
+  },
+  async newPost (_c, post) {
+    return await this.$axios.$post('/v1/posts', post)
   }
 }

終わりに

今回でNuxt.js編最終回です。
Rails編からご覧いただいていた場合、18+6で24章にも及ぶ連載です。ご覧いただいたり、プログラムを書いていただいた皆様ありがとうございました。

Railsで実装したCRUD処理でNuxt側未実装の点も多いため、ここからは自力で実装に挑戦してみてください。

また、RailsもNuxtも（特にNuxtは）初心者でお見苦しいコードも多々あったかと思いますが、これをきっかけにオリジナルのアプリケーション構築への挑戦をオススメします。

終わり

【連載目次へ】