Vueuse useDebouncedRefHistory 库用于记录 ref 对象值的历史记录,同时支持撤销和重做操作。它与 useRefHistory 类似,但它提供debounce 选项,防止频繁记录历史数据,它具有防抖功能。
import { ref } from 'vue'
import { useDebouncedRefHistory } from '@vueuse/core'
// 需要记录的ref对象
const counter = ref({num:100,name:'文一路'});
// deep 深化拷贝,
// debounce 防抖时间间隔 1000毫秒
// canUndo 是否可以撤回
const { history, undo, redo, canUndo, canRedo } = useDebouncedRefHistory(counter, { deep: true, debounce: 1000 })
const onCounter=()=>{
counter.value.num=counter.value.num+1;
}
例子
<template>
<div class="pagex">
<p>canUndo: {{ canUndo }}</p>
<p>counter: {{ counter }}</p>
<pre lang="json" >{{ history}}</pre>
<button @click="onCounter">
累加counter
</button>
<button @click="undo">
撤销 undo
</button>
<button @click="redo">
重置 redo
</button>
</div>
</template>
<script setup lang="ts">
/*
vueuse 中文文档
https://www.itxst.com/vueuse/tutorial.html
*/
import { ref } from 'vue'
import { useDebouncedRefHistory } from '@vueuse/core'
// 需要记录的ref对象
const counter = ref({num:100,name:'文一路'});
// deep 深化拷贝,
// debounce 防抖时间间隔 1000毫秒
// canUndo 是否可以撤回
const { history, undo, redo, canUndo, canRedo } = useDebouncedRefHistory(counter, { deep: true, debounce: 1000 })
const onCounter=()=>{
counter.value.num=counter.value.num+1;
}
</script>