Javascript is required
ยท
1 min read

Pinia Tip: Simple History With Undo and Redo Functionality

Pinia Tip: Simple History With Undo and Redo Functionality Image

I recently needed to implement a simple history with undo and redo functionality for a project I'm working on. I decided to use the useRefHistory composable from VueUse to implement this functionality.

Defining the store

Let's first take a look at the store we use for demonstration purposes which is a simple counter store:

stores/counter.ts
1import { ref } from 'vue';
2import { defineStore } from 'pinia';
3
4export const useCounterStore = defineStore('counter', () => {
5  const count = ref(0);
6
7  function increment() {
8    count.value++;
9  }
10
11  function decrement() {
12    count.value--;
13  }
14
15  return { count, increment, decrement };
16});

Now let's use that store in a Vue component:

components/Counter.vue
1<script setup lang="ts">
2const counterStore = useCounterStore();
3
4const { count } = storeToRefs(counterStore);
5</script>
6
7<template>
8  <div class="container">
9    <span>count is {{ counterStore.count }}</span>
10    <button @click="counterStore.increment">Increment</button>
11    <button @click="counterStore.decrement">Decrement</button>
12  </div>
13</template>

Implementing the history

Now that we have a store, let's implement the history functionality. We can do this by using the useRefHistory composable from VueUse:

components/Counter.vue
1<script setup lang="ts">
2const counterStore = useCounterStore();
3
4const { count } = storeToRefs(counterStore);
5
6const { history, undo, redo } = useRefHistory(count, {
7  capacity: 50, // limit history records
8});
9</script>
10
11<template>
12  <div class="container">
13    <span>count is {{ counterStore.count }}</span>
14    <button @click="counterStore.increment">Increment</button>
15    <button @click="counterStore.decrement">Decrement</button>
16  </div>
17
18  <div class="container" style="margin-top: 20px">
19    <span>History</span>
20    <button @click="undo">Undo</button>
21    <button @click="redo">Redo</button>
22
23    <ul>
24      <li v-for="entry of history" :key="entry.timestamp">
25        <span>{{ entry }}</span>
26      </