# Undo
Tracks variable history, to allow
undo
andredo
# Parameters
import { useUndo } from "vue-composable";
export interface UndoOptions<T> {
/**
* Watch `deep` option for changes
*/
deep: boolean;
/**
* Max history change
* @default MAX_ARRAY_SIZE
*/
maxLength: number;
/**
* Clone strategy
* @default (x)=>x
*/
clone: (entry: T) => T;
}
const defaultOptions = {
deep: undefined,
maxLength: MAX_ARRAY_SIZE,
clone(x) {
return x;
}
}
useUndo(defaultValue?, options?);
Parameters | Type | Required | Default | Description |
---|---|---|---|---|
defaultValue | Ref<T>|T | false | undefined | Default value |
options | (x: T)=>T | false | defaultOptions | Configuration options |
TIP
If tracking object please provide a options.clone
function.
// example
function clone(e) {
return JSON.parse(JSON.stringify(e));
}
# State
The useUndo
function exposes the following reactive state:
import { useUndo } from "vue-composable";
const { value, prev, next } = useUndo();
State | Type | Description |
---|---|---|
value | Ref<T> | State value |
prev | Ref<T[]> | Array of prev states |
next | Ref<T[]> | Array of next states, only if you undo() |
# Methods
The useUndo
function exposes the following methods:
import { useUndo } from "vue-composable";
const { jump, undo, redo } = useUndo();
Signature | Description |
---|---|
jump(delta) | moves the cursor to delta , if delta is positive it will undo , if negative it will redo |
undo(n?) | Undo the state to n default to 1 |
redo(n?) | Redo the state to n default to 1 |
# Example
Type a text to enable undo and redo
Prev []
Next []
# Code
<template>
<div>
<p>Type a text to enable undo and redo</p>
<input v-model="value" />
<div>
<button @click="undo()" :disabled="!prev.length">Undo</button>
<button @click="redo()" :disabled="!next.length">Redo</button>
</div>
<p>
<b>Prev</b>
{{ prev }}
</p>
<p>
<b>Next</b>
{{ next }}
</p>
</div>
</template>
<script>
import { useUndo } from "vue-composable";
export default {
setup() {
return useUndo();
}
};
</script>