# Undo

Tracks variable history, to allow undo and redo

# 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


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

    <p>Type a text to enable undo and redo</p>
    <input v-model="value" />

      <button @click="undo()" :disabled="!prev.length">Undo</button>
      <button @click="redo()" :disabled="!next.length">Redo</button>

      {{ prev }}

      {{ next }}

import { useUndo } from "vue-composable";
export default {
  setup() {
    return useUndo();