app_vue2/composables/form/useForm.ts

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

/**
 * @category composables/form
 * @param store
 * Composable pour gérer l'apparition de message si le formulaire est dirty
 */
export function useForm(store: AnyStore){

  const handler: any = getEventHandler()

  const readonly: ComputedRef<boolean> = computed(() => {
    return store.state.form.readonly
  })

  /**
   * définit le formulaire comme Dirty (modifié)
   */
  function markAsDirty () {
    store.commit('form/setDirty', true)
    if (process.browser) {
      window.addEventListener('beforeunload', handler)
    }
  }

  /**
   * Définit le formulaire comme non dirty (non modifié)
   */
  function markAsNotDirty () {
    store.commit('form/setDirty', false)
    if (process.browser) {
      window.removeEventListener('beforeunload', handler)
    }
  }

  return {
    markAsDirty,
    markAsNotDirty,
    readonly
  }
}

function getEventHandler () {
  return function (e: any) {
    // Cancel the event
    e.preventDefault()
    // Chrome requires returnValue to be set
    e.returnValue = ''
  }
}