Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #119 - Simple Pinia History With Undo and Redo Functionality #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #119

Simple Pinia History With Undo and Redo Functionality

Hi ๐Ÿ‘‹

I have no personal news for you, still busy working on the editor update for CodeSnap ๐Ÿ™ˆ

Have a lovely week โ˜€๏ธ

To support me:

Vue ๐Ÿ“• Vue Patterns
๐Ÿ‘‰๐Ÿป Free guide for Vue patterns that can significantly help in writing clean, efficient, and maintainable code.
๐Ÿ‘‰๐Ÿป Includes patterns like composables, provide/inject, and more.
๐Ÿ“น Is your function REALLY a Vue composable?
๐Ÿ‘‰๐Ÿป In this video, Alex explains the difference between a plain function and a Vue composable.
๐Ÿ“น Vue 3 & Composition API - Full Project
๐Ÿ‘‰๐Ÿป Build an expense tracker application from scratch using Vue.js 3 and the composition API with the latest syntax from version 3.2.
๐Ÿ“น Vue.js (Vue v3) for Beginners
๐Ÿ‘‰๐Ÿป A mega three-hour workshop on YouTube.
๐Ÿ› ๏ธ Interactive Example in Vue Macros
๐Ÿ‘‰๐Ÿป You can try previewing different syntaxes for Vue, including defining props, emits, render functions, and components.
Nuxt ๐Ÿ“น Data Fetching With Nuxt 3
๐Ÿ‘‰๐Ÿป This video covers the two composables ( useFetch() & useAsyncData() ) used to fetch data within Nuxt 3.
๐Ÿ“• Nuxt Social Share Module
๐Ÿ‘‰๐Ÿป This module helps you to easily integrate social share buttons to your app.
๐Ÿ“… EventsVuejs Amsterdam 2024
๐Ÿ‘‰๐Ÿป 28 - 29 February 2024, Amsterdam
๐Ÿ’ฌ Quote of the week๐Ÿ”ฅ Pinia Tip: Simple History With Undo and Redo Functionality

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:

import { ref } from 'vue'; import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', () => { const count = ref(0); function increment() { count.value++; } function decrement() { count.value--; } return { count, increment, decrement }; });

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

<script setup lang="ts"> const counterStore = useCounterStore(); const { count } = storeToRefs(counterStore); </script> <template> <div class="container"> <span>count is {{ counterStore.count }}</span> <button @click="counterStore.increment">Increment</button> <button @click="counterStore.decrement">Decrement</button> </div> </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:

<script setup lang="ts"> const counterStore = useCounterStore(); const { count } = storeToRefs(counterStore); const { history, undo, redo } = useRefHistory(count, { capacity: 50, // limit history records }); </script> <template> <div class="container"> <span>count is {{ counterStore.count }}</span> <button @click="counterStore.increment">Increment</button> <button @click="counterStore.decrement">Decrement</button> </div> <div class="container" style="margin-top: 20px"> <span>History</span> <button @click="undo">Undo</button> <button @click="redo">Redo</button> <ul> <li v-for="entry of history" :key="entry.timestamp"> <span>{{ entry }}</span> </li> </ul> </div> </template>

Try it yourself in the following StackBlitz:

โšก Open Demo๐Ÿ˜‚ Fun๐Ÿง‘๐Ÿปโ€๐Ÿ’ป In Other News๐Ÿ“• Tech Interview Handbook
๐Ÿ‘‰๐Ÿป Curated coding interview preparation materials.
๐Ÿ“• Web Components Will Outlive Your JavaScript Framework
๐Ÿ‘‰๐Ÿป A spicy opinion but an interesting read.
๐Ÿ“• How TechCrunch Spent $1 Million Rebuilding Their Website
๐Ÿ‘‰๐Ÿป Ever wondered how a website project can cost so much?๐Ÿ‘‡๐Ÿป
๐Ÿ“• Bad Licenses
๐Ÿ‘‰๐Ÿป A compendium of poorly written or absurd open-source licenses.
๐Ÿ› ๏ธ background-removal-js
๐Ÿ‘‰๐Ÿป Remove backgrounds from images directly in the browser or Node.js environment with ease and no additional costs or privacy concerns.
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
Michael ThiessenDan VegaKareem DabbeetAhmed Ragab
Join - other Vue developers
ยฉ 2023 All rights reserved.