Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast編)

<script lang="ts">
import axios from 'axios';
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {

  // props
  @Prop() private propHoge!: string;

  // data
  message: string = "Hoge";
  hogeCount: number = 0;

  // computed
  get double() {
    return this.hogeCount* 2;
  }

  // mounted
  mounted() {
    this.gethoge();
  }

  // methods
  getData() {
    axios
      .get("https://hogehoge.com")
      .then(response => (this.message = response));
  }
}
</script>

<script lang="ts">
  import {
    createComponent,
    reactive,
    onBeforeMount,
    onMounted,
    computed,
    ref
  } from '@vue/composition-api';
  import axios from 'axios';
  import toast from '@nuxtjs/toast';
  import {PdfFileNotFoundError} from "~/types/error";
  const backendURL = 'https://ebook-homebrew.herokuapp.com/';

  // data
  // ref,またはreactiveとして設定するとTemplateでreactiveに変更が反映される
  // setup()の外でも中でもOK
  const state = reactive<{
    uploadList: Array<Map<string, string>>
  }>({
    uploadList: []
  });

  // methods
  const updateFileList = async (): Promise<void> => {
     (ロジック)
  };

  const downloadPDF = async (filePath: string): Promise<Blob> => {
　　　(ロジック)
  };
  
  // typeまたはinterfaceでpropsの型指定
  type Props = {
    propHello: string;
  };
  
  //createComponet内でprops, components, layoutなどを設定
  export default createComponent({
    //props
    props: {
      propHello: {
        type: String
      }
    },
    //setup()ではじめてVueインスタンス化されるのでinjectされたものはsetup内でしかとれない。
    setup (props: Props, ctx) {

      // propsをsetup内ローカル変数で再設定
      const propsHello = props.propHello;

      //Contextをsetupで受け取ることができ、module化されたものはroot要素からとれる
      const toast = ctx.root.$root.$toast;

      //setup内でもmethods作成可能。Context rootから取得するものを使わないといけない場合、setup内で実装するしか道はなさそう
      const doDownload = async (filePath: string): Promise<void> => {
         (ロジック)
      };
      //ライフサイクルはsetup内で記載、またライフサイクル自体も従来と異なる
      onBeforeMount( async () => {
        await updateFileList()
        }
      );
      //setupのreturnで返したものがtemplateで使える変数
      return {
        state,
        propsHello,
        doDownload
      };
    }
  });
</script>

//あらかじめnuxt.config.jsにmodules: ['@nuxtjs/axios']を宣言し、同configにplugins: ['~/plugins/axios'] も宣言しておく
//@/plugins/axios.js

// modulesのaxiosを呼び出す際の共通のエラー処理を記載
export default function ({ $axios, redirect }) {

    $axios.onError(err => {
        const statusCode = parseInt(err.response && err.response.status)
        if (statusCode === 404) {
            redirect('/not-found-page')
 
        }
    })

}

//利用側components: hoge.vue

export default {
  methods: {
    async sendRequest() {
 //methods内では this.$axios
      const response = await this.$axios.$get('https://hoge.com');
      res = response.headers.Accept;
    }
  },
  async asyncData({ $axios }) {
 //asyncData, fetchなどでは $axiosで取得
    const hoges= await $axios.$get("https://hoge/hoge",{
        params: {
          userId: "hoon"
        }
      }
    )
    return { hoges };
  }
};

//nuxt.config.ts

(中略)
modules: [
    '@nuxtjs/toast',
  ],

<script lang="ts">
  import {
    createComponent,
    reactive,
    onBeforeMount,
    onMounted,
    computed,
    ref
  } from '@vue/composition-api';
  import axios from 'axios';
  import toast from '@nuxtjs/toast';

  // 独自エラー(404 NotFound)を作ってtoastを出しわける
  class PdfFileNotFoundError extends Error {
    constructor(e?: string) {
      super(e);
      this.name = new.target.name;
      Object.setPrototypeOf(this, new.target.prototype);
    }  
  }

  const backendURL = 'https://ebook-homebrew.herokuapp.com/';

  // ロジック
  const downloadPDF = async (filePath: string): Promise<Blob> => {
    const res = await axios.post(backendURL + 'convert/pdf/download', { uploadId: filePath, },
      {responseType: 'blob'}).catch((err) => {
      if (err.response.status === 404) {
        throw new PdfFileNotFoundError('PdfFileNotFound');
 //404 NotFoundだったら独自エラーをthrow
      } else {
        throw err;
      }
    },
    );
    return new Blob([res.data], {type: 'application/pdf'});
  };

  export default createComponent({

    setup (ctx) {
 //setupでContextを受け取れるので受け取る
      
      //modulesはContextのrootから取れる
      const toast = ctx.root.$root.$toast;
      const doDownload = async (filePath: string): Promise<void> => {
        const options = {
          position: 'top-center',
          duration: 2000,
          fullWidth: true,
          type: 'error',
        } as any;
        try{
          const blob = await downloadPDF(filePath);
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = 'result.pdf';
          link.click();
        } catch (e) {
          //errorをキャッチ
          if (e instanceof PdfFileNotFoundError) {
            toast.show('No File!!', options)
 //エラーハンドリングでtoast呼び出し
          } else {
            toast.show('UnknownError!!', options)
          }
        }
      };
      return {
        state,
        doDownload
      };
    }
  });
</script>