シングルトンパターンを利用してトーストの複数表示を行う

class MySingleton {
    private static instance: MySingleton
    // ポイント1: コンストラクタをprivateにする
    private constructor (){}

    // ポイント2: インスタンスを取得するためのstaticメソッドを作成する
    static getInstance() {
        if (MySingleton.instance) {
            return MySingleton.instance
        }
        MySingleton.instance = new MySingleton()
        return MySingleton.instance
    }
}

const instance1 = MySingleton.getInstance()
const instance2 = MySingleton.getInstance()

console.log(instance1 === instance2)  // True

class Toastification {
  private static toastInterface: Toastification
  toast

  // ポイント1: コンストラクタをprivateにする
  private constructor() {
    const pluginOptions = {
      maxToasts: 10,
    }
    this.toast = createToastInterface(pluginOptions)
  }

  // ポイント2: インスタンスを取得するためのstaticメソッドを作成する
  private static getInterface() {
    if (Toastification.toastInterface) return this.toastInterface
    Toastification.toastInterface = new Toastification()
    return Toastification.toastInterface
  }

  static toast = (props: {title: string, text: string}) => {
    const toastInterface = Toastification.getInterface()
    const content = {
      component: SToaster,  // カスタマイズしたコンポーネントをセットする
      props: {
        title: props.title,
        text: props.text,
      },
    }
    toastInterface.toast(content, {
      type: TYPE.SUCCESS,
      closeButton: 'button',
    })
  }
}
export { toast }

<script>
import { defineComponent } from '@vue/composition-api'
import { toast } from '~/vueToastification'

export default defineComponent({
  setup() {
    const onClick = () => {
      // toastを呼び出すことで、トーストが表示される
      toast({
        title: '成功',
        text: 'いい調子ですね',
      })
    }
    return { onClick }
  },
})
</script>