useManualRefHistory

カテゴリ

状態

エクスポートサイズ

516 B

最終更新日

先週

デモ

ソースコード

カウント: 0

履歴 (デモでは10件に制限)

2024-11-28 03:59:07{ value: 0 }

使用方法

TypeScript

import { useManualRefHistory } from '@vueuse/core'
import { ref } from 'vue'

const counter = ref(0)
const { history, commit, undo, redo } = useManualRefHistory(counter)

counter.value += 1
commit()

console.log(history.value)
/* [
  { snapshot: 1, timestamp: 1601912898062 },
  { snapshot: 0, timestamp: 1601912898061 }
] */

`undo` を使用して、ref の値を最後の履歴ポイントにリセットできます。

TypeScript

console.log(counter.value) // 1
undo()
console.log(counter.value) // 0

変更可能なオブジェクトの履歴

ソースを変更する場合は、カスタムクローン関数を渡すか、パラメーターとして `clone` `true` を使用してください。これは、`dump` と `parse` の両方で使用される最小限のクローン関数 `x => JSON.parse(JSON.stringify(x))` のショートカットです。

TypeScript

import { useManualRefHistory } from '@vueuse/core'
import { ref } from 'vue'

const counter = ref({ foo: 1, bar: 2 })
const { history, commit, undo, redo } = useManualRefHistory(counter, { clone: true })

counter.value.foo += 1
commit()

カスタムクローン関数

`clone` オプションを使用して、フル機能のまたはカスタムのクローン関数を使用できます。

たとえば、structuredClone を使用します。

TypeScript

import { useManualRefHistory } from '@vueuse/core'

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

または、lodash の `cloneDeep` を使用します。

TypeScript

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

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

または、より軽量な `klona` を使用します。

TypeScript

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

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

カスタムダンプおよびパース関数

`clone` オプションを使用する代わりに、シリアライズとパースを制御するためのカスタム関数を渡すことができます。履歴値をオブジェクトにする必要がない場合、元に戻すときの余分なクローンを節約できます。これは、スナップショットを既に文字列化してローカルストレージに保存する場合にも役立ちます。

TypeScript

import { useManualRefHistory } from '@vueuse/core'

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

履歴容量

明示的にクリアするまで、デフォルトではすべての履歴を保持します（無制限）。`capacity` オプションで保持する履歴の最大量を設定できます。

TypeScript

const refHistory = useManualRefHistory(target, {
  capacity: 15, // limit to 15 history records
})

refHistory.clear() // explicitly clear all the history

型定義

型定義を表示

TypeScript

export interface UseRefHistoryRecord<T> {
  snapshot: T
  timestamp: number
}
export interface UseManualRefHistoryOptions<Raw, Serialized = Raw> {
  /**
   * Maximum number of history to be kept. Default to unlimited.
   */
  capacity?: number
  /**
   * Clone when taking a snapshot, shortcut for dump: JSON.parse(JSON.stringify(value)).
   * Default to false
   *
   * @default false
   */
  clone?: boolean | CloneFn<Raw>
  /**
   * Serialize data into the history
   */
  dump?: (v: Raw) => Serialized
  /**
   * Deserialize data from the history
   */
  parse?: (v: Serialized) => Raw
  /**
   * set data source
   */
  setSource?: (source: Ref<Raw>, v: Raw) => void
}
export interface UseManualRefHistoryReturn<Raw, Serialized> {
  /**
   * Bypassed tracking ref from the argument
   */
  source: Ref<Raw>
  /**
   * An array of history records for undo, newest comes to first
   */
  history: Ref<UseRefHistoryRecord<Serialized>[]>
  /**
   * Last history point, source can be different if paused
   */
  last: Ref<UseRefHistoryRecord<Serialized>>
  /**
   * Same as {@link UseManualRefHistoryReturn.history | history}
   */
  undoStack: Ref<UseRefHistoryRecord<Serialized>[]>
  /**
   * Records array for redo
   */
  redoStack: Ref<UseRefHistoryRecord<Serialized>[]>
  /**
   * A ref representing if undo is possible (non empty undoStack)
   */
  canUndo: ComputedRef<boolean>
  /**
   * A ref representing if redo is possible (non empty redoStack)
   */
  canRedo: ComputedRef<boolean>
  /**
   * Undo changes
   */
  undo: () => void
  /**
   * Redo changes
   */
  redo: () => void
  /**
   * Clear all the history
   */
  clear: () => void
  /**
   * Create a new history record
   */
  commit: () => void
  /**
   * Reset ref's value with latest history
   */
  reset: () => void
}
/**
 * Track the change history of a ref, also provides undo and redo functionality.
 *
 * @see https://vueuse.dokyumento.jp/useManualRefHistory
 * @param source
 * @param options
 */
export declare function useManualRefHistory<Raw, Serialized = Raw>(
  source: Ref<Raw>,
  options?: UseManualRefHistoryOptions<Raw, Serialized>,
): UseManualRefHistoryReturn<Raw, Serialized>