Vueuse useManualRefHistory 手动提交修改记录

Vueuse useManualRefHistory 和useRefHistory不同需要手动调用commit()保存当前记录，手动跟踪ref的更改历史，还提供撤消和重做功能。

代码示例

import { ref } from 'vue';
import { useManualRefHistory } from '@vueuse/core';
 
const times= ref(100);
//绑定ref对象
const { history, commit, undo, redo,clear,canUndo, canRedo} = useManualRefHistory(times);
//或设置最多记录10数据
const { history, commit, undo, redo,clear,canUndo, canRedo } = useManualRefHistory(times,{capacity:10});
//修改它的值
times.value += 1;
//记录这次修改
commit();
//记录的内容
console.log(history.value);
/* [
  { snapshot: 1, timestamp: 1688283665997},
  { snapshot: 0, timestamp: 1688283663309}
] */
//撤销修改
undo();
//重置
redo();
//清除所有记录
clear();

记录引用对象

// 需要记录的ref对象
const userInfo = ref({num:100,name:'文一路'});
// clone 是否深拷贝，如果false ,记录的数据都是一样的，感觉没有啥意义 
const { history  } = useManualRefHistory(userInfo,
{
   clone: false
 })

clone:true 例子

例子

clone:false 例子

例子

自定义clone函数

使用 js原生的 structuredClone进行深拷贝:

import { useManualRefHistory } from '@vueuse/core'

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

或者使用 lodash的cloneDeep函数进行深拷贝:

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

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

或者lightweight klona:

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

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

自定义Dump and Parse

如果不使用clone参数，您可以传递自定义函数来控制序列化和解析函数

import { useManualRefHistory } from '@vueuse/core'

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