useManualRefHistory | VueUse

useManualRefHistory
​
Category
State
Export Size
516 B
Last Changed
4 months ago
Related
useRefHistory

Manually track the change history of a ref when the using calls commit(), also provides undo and redo functionality

Demo
​

source

Count: 0
IncrementDecrement/CommitUndoRedo


History (limited to 10 records for demo)
2023-11-28 22:16:17{ value: 0 }
Usage
​
ts
import { ref } from 'vue'
import { useManualRefHistory } from '@vueuse/core'

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

counter.value += 1
commit()

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

You can use undo to reset the ref value to the last history point.

ts
console.log(counter.value) // 1
undo()
console.log(counter.value) // 0
History of mutable objects
​

If you are going to mutate the source, you need to pass a custom clone function or use clone true as a param, that is a shortcut for a minimal clone function x => JSON.parse(JSON.stringify(x)) that will be used in both dump and parse.

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

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

counter.value.foo += 1
commit()
Custom Clone Function
​

To use a full featured or custom clone function, you can set up via the clone options.

For example, using structuredClone:

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

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

Or by using lodash's cloneDeep:

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

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

Or a more lightweight klona:

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

const refHistory = useManualRefHistory(target, { clone: klona })
Custom Dump and Parse Function
​

Instead of using the clone options, you can pass custom functions to control the serialization and parsing. In case you do not need history values to be objects, this can save an extra clone when undoing. It is also useful in case you want to have the snapshots already stringified to be saved to local storage for example.

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

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

We will keep all the history by default (unlimited) until you explicitly clear them up, you can set the maximal amount of history to be kept by capacity options.

ts
const refHistory = useManualRefHistory(target, {
  capacity: 15, // limit to 15 history records
})

refHistory.clear() // explicitly clear all the history
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Matias Capeletto
Lov`u`e
Егор
丶远方
azaleta
Eduardo Wesley
Sahin D
vaakian X
Hollis Wu
wheat
Alex Kozack
Changelog
​
v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v9.2.0 on 9/5/2022
369e1 - feat(useVModel): support clone option (#2022)