【学習記録】フロントエンドのメッセージ表示用の関数を共通化した

フロントエンドのログイン後などに表示する通知メッセージをmixinで共通で使えるようにしました。
コミットはこちらです。

github.com

mixin.jsで以下のように共通関数を定義しました。

export default {
  methods: {
    showLoginSeccessMessage() {
      this.$buefy.toast.open({
        message: 'ログインしました',
        type: 'is-success'
      })
    },
    showLoginFailMessage() {
      this.$buefy.toast.open({
        message: 'ユーザー名かパスワード名が間違っています',
        type: 'is-danger'
      })
    },
    showSignupSuccessMessage() {
      this.$buefy.toast.open({
        message: '新規登録完了しました',
        type: 'is-success'
      })
    },
    showSignupFailMessage() {
      this.$buefy.toast.open({
        message: '新規登録に失敗しました',
        type: 'is-danger'
      })
    },
    showLogoutMessage() {
      this.$buefy.toast.open({
        message: 'ログアウトしました',
        type: 'is-info'
      })
    }
  }
}

buefyのtoastがシンプルに使いやすくて重宝してます。

しかしなかなかmixinで定義した関数が呼び出すコードが書けず苦戦してしまったのですが、原因は呼び出し先のファイルでmixinを{}で記述していたことのようでした。
以下のように書くとmixinの関数が呼び出せませんでした。

<script>
import mixin from '@/mixin/mixin.js';

export default {
  mixins: {
    mixin
  },

以下のように[]で記述すると想定通りmixinの関数を呼び出せました。

<script>
import mixin from '@/mixin/mixin.js';

export default {
  mixins: [
    mixin
  ],

mixinの関数を呼び出せるようになったので以下のようにログイン成功時と失敗時にメッセージを表示する関数を呼び出すようにコーディングしました。

methods: {
    login() {
      this.$store.dispatch("auth/login", {
        username: this.form.username,
        password: this.form.password,
      })
      .then(() => {
        if (this.isLoggedIn) {
          this.showLoginSeccessMessage()
          this.$router.push("/")
        }
        if (!this.isLoggedIn) {
          this.showLoginFailMessage()
        }
      })
  

上記の実装でログイン成功時に以下のようにメッセージが表示されるようになりました。