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.
www.patterns.dev📹 Is your function REALLY a Vue composable?
👉🏻 In this video, Alex explains the difference between a plain function and a Vue composable.
www.youtube.com📹 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.
www.youtube.com📹 Vue.js (Vue v3) for Beginners
👉🏻 A mega three-hour workshop on YouTube.
www.youtube.com🛠️ Interactive Example in Vue Macros
👉🏻 You can try previewing different syntaxes for Vue, including defining props, emits, render functions, and components.
vue-macros.dev/interactive/ Nuxt 📹 Data Fetching With Nuxt 3
👉🏻 This video covers the two composables ( useFetch() & useAsyncData() ) used to fetch data within Nuxt 3.
www.youtube.com📕 Nuxt Social Share Module
👉🏻 This module helps you to easily integrate social share buttons to your app.
github.com📅 EventsVuejs Amsterdam 2024
👉🏻 28 - 29 February 2024, Amsterdam
vuejs.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.
github.com📕 Web Components Will Outlive Your JavaScript Framework
👉🏻 A spicy opinion but an interesting read.
jakelazaroff.com📕 How TechCrunch Spent $1 Million Rebuilding Their Website
👉🏻 Ever wondered how a website project can cost so much?👇🏻
www.pootlepress.com📕 Bad Licenses
👉🏻 A compendium of poorly written or absurd open-source licenses.
github.com🛠️ background-removal-js
👉🏻 Remove backgrounds from images directly in the browser or Node.js environment with ease and no additional costs or privacy concerns.
github.comComments? 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
Curated by:
Newsletter Author Michael Hoffmann
Michael Hoffmann
RSSSubmit an articleSponsor this newsletterLatest Issue
TestimonialsAboutSite NoticeTerms of ServicePrivacy Policy
© 2023 weekly-vue.news. All rights reserved.