asyncDataとmethodsで被る処理がある場合の共通化する書き方を知りたいです。

Question

nuxtを勉強しており、以下はajaxでデータを取ってきてそれをテーブルに表示するだけの処理です。

※以下ではvuetifyやtypescriptを使ってますが今回の質問にはさほど関係ないのでないのであえてタグは付けませんでした。

<template>
  <v-row justify="center"
         align="center">
    <v-col cols="12">
      <v-btn @click="redrawBlogs">
        redraw
      </v-btn><!-- @REVIEW 再描画ボタン  -->
      <v-data-table
        :loading="loading"
        :headers="headers"
        :items="items"
        :items-per-page="10"
        class="elevation-1" />
    </v-col>
  </v-row>
</template>

<script type="ts">
import Vue from 'vue';

export default Vue.extend({
  data: () => ({
    loading: false,
    headers: [
      {
        text: 'id',
        align: 'start',
        sortable: false,
        value: 'id'
      },
      {
        text: 'TITLE',
        sortable: true,
        value: 'title'
      },
    ],
    items: []
  }),
  created () {
    this.redrawBlogs(); // @REVIEW 初期の描画
  },
  methods: {
    async fetchBlogs () {
      const response = await this.$axios.get('/api/blogs');
      return response.data || [];
    },
    async redrawBlogs () {
      this.loading = true;
      const data = await this.fetchBlogs();
      this.items = data;
      this.loading = false;
    }
  }
});

createdで初期表示時のデータを取得しています。
nuxtにはasyncDataなるものがあり、createdを削除し下記のコードに置き換えました。

  async asyncData ({ $axios }) {
    const response = await $axios.get('/api/blogs');
    return { items: response.data || [] };
  },

すると初期化前に実行されるのでデータが取れた状態から表示できます。
しかし、$axiosの部分が冗長になり、仮に修正があった際は２か所直さなければなりません。

    const response = await this.$axios.get('/api/blogs');

asyncDataはthisは使えないし、methodsも呼び出せない。（←あってますよね？）
上記のようなケースでもう少しいい組み方はあるのでしょうか？

よろしくお願いします。

Answer 1

一応これで共通化はできる。
さらにいいやり方あるのかもしれないけど、今の自分には多分これが限界かな。
回答来ないので一旦これで終了で。。。

• /api/modules/blog.ts

import { axios } from '~/plugins/axios';

export default {
  async page (params: { [key: string]: string } = {}) {
    return await axios.get('blogs', { params });
  },

• /api/index.ts

import blog from './modules/blog';

export {
  blog as blogApi,
};

• /pages/blog.ts

<script type="ts">
import Vue from 'vue';
import { blogApi } from '~/api';

export default Vue.extend({
  async asyncData ({ app }) {
    const response = await blogApi.page();
    :
  }
  :
  methods: {
    async fetchBlogs () {
      const response = await blogApi.page();
    },
  :

Answer 2

自己解決したので記載します。
が、もっといい方法やこのやり方の懸念点がある場合、教えていただければ幸いです。

自分がやった方法
拡張したプラグイン（今回のケースではaxios）を作成する。

// ~/plugins/api.ts
import { NuxtConfig } from '@nuxt/types';
import { NuxtAxiosInstance } from '@nuxtjs/axios';

export default function (
  { $axios }: NuxtConfig,
  inject: (arg0: string, arg1: { getBlogs: () => Promise<any>; }) => void
) {
  const api = $axios.create({});
  (<NuxtAxiosInstance> api).setBaseURL('/api/');

  // @TODO 下記はとりあえずテスト用に用意しただけ。後でもっときちんと書く。
  async function getBlogs (params: { [key: string]: string } = {}) {
    return await api.get('blogs', { params });
  }

  inject('api', { getBlogs });
}

で、それを有効にする。

// nuxt.config.ts
plugins: ['~/plugins/api'],

すると$apiというのが使えるようになり、asyncDataとmethods、其々以下のように置き換えることが出来き、冗長が解消されました。

async asyncData ({ app }) {
  // const response = await $axios.get('/api/blogs');
  const response = await app.$api.getBlogs();
  return { items: response.data || [] };
},

methods: {
  async fetchBlogs () {
    // const response = await this.$axios.get('/api/blogs');
    const response = await this.$api.getBlogs();
    return response.data || [];
  },

Comments

[tomomo]

...あ、これダメだ。
冗長は解消はしてるけど、getBlogsの部分でapiナンタラって書いてしまってるのでアクセス処理を全てこのファイルにズラズラ書かなきゃならない。
処理はimportしてみたいなのを考えてた。
引き続き、解答を求めます。。。

Answer 3

vuexを使われてはいかがでしょうか？
コードがすっきりしますし、axiosで取得したデータも他のコンポーネントで使用することができます。

また、axiosのコードはメソッドとして一々呼び出すのではなく、
data-tableに表示するのであれば、createdやmountedを使用するのが良いかと思います。
こちらの記事が参考になると思いますので、参考まで

createdとmountedの違いについて

Comments

[tomomo]

回答ありがとうございます。
asyncDataを使用しようとしたのはページコンポーネントの初期化前に実行されるという部分でメリットを感じたからです。データ読み込んだ後に全部表示されるという部分で。
上にあげたようなレベルのであれば別にcreatedでもいいじゃないかとも思われるでしょうが、そういう冗長が発生する場合、asyncDataではthisもmethodsも使えないので分離されてしまい、どのように書けば（設計すれば）いいのだろうか？というのが質問の趣旨です。