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

この記事は1105文字で約3分で読めます

前回の続きです。

前回Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast編)ではNuxt.jsのmodulesを使ってtoastを出してみました。

ただ、前回の実装だとどこからともなく、

特に再利用もしてないし、共通処理も定義してないからpluginsとか使ってあげれば、modulesじゃなくていいんじゃないんですかねぇ

という声が聞こえてきそうです。

いやはやその通りだとは思いますのでmodulesのもう1つの魅力、global optionsの実装を進めようかと思います。

#toastのoption問題

toastを使う際にはtoastを出す場所(position), toastをひっこめるまでの時間(duration)、色合いなどを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) {
    if (e instanceof PdfFileNotFoundError) {
      toast.show('No File!!', options)
    } else {

      toast.show('UnknownError!!', options)
    }
  }
}

コードの見通しが悪いですね・・。

同じような設定を複数のtoastにoptionsで設定するのはめんどくさい・・。

#modules global optionを使ってみる

では、こちらを改善していきます。

@nuxtjs/toastにはglobal optionsの機能があります。

//nuxt.config.ts

  modules: [
    '@nuxtjs/toast',
  ],
  toast: {
    position: 'top-center',
    duration: 2000,
    fullWidth: true,
    iconPack : 'material',

  },

このようにmodulesで**@nuxtjs/toast**を読み込んだ後、toast共通設定を入れます。

たったこれだけ簡単！

#もっと見通しをよくしたい。registerを使おう

さらにコードの見通しをよくしたければ、registerという機能を使うことができます。

たとえば致命的なエラーの時は共通のメッセージを出すtoastを各コンポーネントに量産しなければならない場合など、コードのコピペはしんどいしメンテナンスもよくないのでこいつが便利です。

//nuxt.config.ts

  modules: [
    '@nuxtjs/toast',
  ],
  toast: {
    position: 'top-center',
    duration: 2000,
    fullWidth: true,
    iconPack : 'material',
    register: [
      {
        name: 'nofileError',
        message: 'No File!!',
        options: {
          type: 'info',
        },
      },
      {
        name: 'unknownError',
 //toast名: 利用するときに使う名前
        message: 'UnknownError!!',
 //toastのmessage
        options: {
          type: 'error',
 //個別に設定したいオプションがあれば
        },
      },
    ],
  },

とtoastの情報を登録しておくことにより利用側で、

const doDownload = async (filePath: string): Promise<void> => {
  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) {
    if (e instanceof PdfFileNotFoundError) {
      toast.global.nofileError(); //呼び出し
    } else {
      toast.global.unknownError();
 //呼び出し
    }
  }
};