app_vue2/use/form/useForm.ts

import { AnyJson, AnyStore } from '~/types/interfaces'
import {computed, ComputedRef, useStore} from "@nuxtjs/composition-api";

/**
 * @category Use/form
 * @class UseDirtyForm
 * Use Classe pour gérer l'apparition de message si le formulaire est dirty
 */
export class UseForm {
  private store: AnyStore
  private readonly handler: any

  constructor () {
    this.store = useStore()
    this.handler = getEventHandler()
  }

  /**
   * Composition function
   */
  public invoke (): AnyJson {
    const readonly: ComputedRef<boolean> = computed(() => {
      return this.store.state.form.readonly
    })

    return {
      markFormAsDirty: () => this.markAsDirty(),
      markFormAsNotDirty: () => this.markAsNotDirty(),
      readonly
    }
  }

  /**
   * définit le formulaire comme Dirty (modifié)
   */
  private markAsDirty () {
    this.store.commit('form/setDirty', true)
    this.addEventListener()
  }

  /**
   * Définit le formulaire comme non dirty (non modifié)
   */
  private markAsNotDirty () {
    this.store.commit('form/setDirty', false)
    this.clearEventListener()
  }

  /**
   * Ajoute un Event avant le départ de la page
   */
  private addEventListener () {
    if (process.browser) {
      window.addEventListener('beforeunload', this.handler)
    }
  }

  /**
   * Supprime l'Event avant le départ de la page
   */
  private clearEventListener () {
    if (process.browser) {
      window.removeEventListener('beforeunload', this.handler)
    }
  }
}

function getEventHandler () {
  return function (e: any) {
    // Cancel the event
    e.preventDefault()
    // Chrome requires returnValue to be set
    e.returnValue = ''
  }
}
export const $useForm = () => new UseForm().invoke()