Add commit/restore storage method to Vue.js global state Ref

storableRef.ts

import { ref } from 'vue-demi'
import type { Ref, UnwrapRef } from 'vue-demi'
import { createGlobalState, useSessionStorage } from '@vueuse/core'

export type StorableRef<T> = Ref<T> & {
  commit: () => void
  restore: () => void
}

const createState = <T>(storageKey: string, initialValue: T) => createGlobalState(() => useSessionStorage(storageKey, initialValue))

export function storableRef<T>(storageKey: string, initialValue: T): StorableRef<T> {
  const actual = ref(initialValue) as Ref<T>
  const stored = createState<T>(storageKey, initialValue)()

  const commit = () => {
    stored.value = actual.value
  }
  const restore = () => {
    actual.value = stored.value
  }

  Object.defineProperties(actual, {
    commit: {
      value: commit,
    },
    restore: {
      value: restore,
    },
  })

  // read from storage on mount
  restore()

  return actual as StorableRef<T>
}

Usage:

<script setup>
const name = storableRef('')
const save = async () => {
  await saveForDatabase()
  name.commit()
}
const reset = () => name.restore()
</script>
<template>
  <div>
    <input v-model="name" />
    <button @click="reset">Reset</button>
  </div>
</template>