useManualRefHistory

commit()を呼び出す際に、refの変更履歴を手動で追跡し、元に戻す（undo）およびやり直す（redo）機能を提供します。

使用法

import { useManualRefHistory } from '@vueuse/core'
import { shallowRef } from 'vue'

const counter = shallowRef(0)
const { history, commit, undo, redo } = useManualRefHistory(counter)

counter.value += 1
commit()

console.log(history.value)
/* [
  { snapshot: 1, timestamp: 1601912898062 },
  { snapshot: 0, timestamp: 1601912898061 }
] */

undoを使用して、refの値を最後の履歴ポイントにリセットできます。

// @include: usage
// ---cut---
console.log(counter.value) // 1
undo()
console.log(counter.value) // 0

ミュータブルオブジェクトの履歴

ソースを変更する場合は、カスタムクローン関数を渡すか、cloneをtrueとしてパラメータに渡す必要があります。これは、dumpとparseの両方で使用される最小限のクローン関数x => JSON.parse(JSON.stringify(x))のショートカットです。

import { useManualRefHistory } from '@vueuse/core'
import { ref } from 'vue'

const counter = ref({ foo: 1, bar: 2 })
const { history, commit, undo, redo } = useManualRefHistory(counter, { clone: true })

counter.value.foo += 1
commit()

カスタムクローン関数

フル機能またはカスタムクローン関数を使用するには、cloneオプションを介して設定できます。

例えば、structuredCloneを使用する場合：

import { useManualRefHistory } from '@vueuse/core'

const refHistory = useManualRefHistory(target, { clone: structuredClone })

または、lodashのcloneDeepを使用する場合：

import { useManualRefHistory } from '@vueuse/core'
import { cloneDeep } from 'lodash-es'

const refHistory = useManualRefHistory(target, { clone: cloneDeep })

または、より軽量なklonaを使用する場合：

import { useManualRefHistory } from '@vueuse/core'
import { klona } from 'klona'

const refHistory = useManualRefHistory(target, { clone: klona })

カスタムダンプおよびパース関数

cloneオプションを使用する代わりに、シリアル化とパースを制御するカスタム関数を渡すことができます。履歴の値をオブジェクトにする必要がない場合、元に戻す際に余分なクローンを省くことができます。また、スナップショットを文字列化してローカルストレージに保存したい場合にも便利です。

import { useManualRefHistory } from '@vueuse/core'

const refHistory = useManualRefHistory(target, {
  dump: JSON.stringify,
  parse: JSON.parse,
})

履歴の容量

デフォルトではすべての履歴を保持します（無制限）。明示的にクリアするまで、capacityオプションで保持する履歴の最大量を設定できます。

import { useManualRefHistory } from '@vueuse/core'

const refHistory = useManualRefHistory(target, {
  capacity: 15, // 履歴を15件に制限
})

refHistory.clear() // 明示的にすべての履歴をクリア