useTimeline

Tracks variable history

Parameters

import { useTimeline } from "vue-composable"; const options = { deep: Boolean, maxLength: Number, clone(entry: T): T } const timeline = useTimeline(value, options); 

Parameters	Type	Required	Default	Description
value	Ref<T>	true		ref to track history
options	TimelineOptions<T>	false	{ deep: false, maxLength: MAX_ARRAY_SIZE, clone: (x)=>x }	timeline options

TIP

If tracking object please provide a options.clone function.

// example function clone(e) { return JSON.parse(JSON.stringify(e)); } 

State

The useTimeline function exposes the following reactive state:

import { useTimeline } from "vue-composable"; const timeline = useTimeline(); 

State	Type	Description
timeline	Ref<{item: T, date: Date}[]>	timeline array

Example

Type a text to enable undo and redo

History []

Code

<template> <div> <p>Type a text to enable undo and redo</p> <input v-model="value" /> <p> <b>History</b> {{ timeline }} </p> </div> </template> <script> import { ref } from "@vue/composition-api"; import { useTimeline } from "vue-composable"; export default { setup() { const value = ref(""); const timeline = useTimeline(value); return { value, timeline }; } }; </script>