Featured resource
pluralsight tech forecast
2025 Tech Forecast

Which technologies will dominate in 2025? And what skills do you need to keep up?

Check it out
Hamburger Icon
  • Labs icon Lab
  • Core Tech
Labs

Challenge: Adding State Management to an Application with Pinia

Vue is a great front-end framework to help quickly build web applications, though there are times that managing state across various views can become cumbersome. Pinia is a great plug-in to help you manage state across views. In this challenge lab, your objective is to implement a Pinia store to help manage questions and answers in a Flashcard application.

Labs

Path Info

Level
Clock icon Intermediate
Duration
Clock icon 30m
Published
Clock icon Jun 28, 2023

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    Introduction

    Welcome to the "Challenge: Adding State Management to an Application with Pinia" lab.

    In this challenge lab, your objective is to refactor the Flashcard application to manage the flashcards collection using Pinia.

    Currently, the flashcards collection is hardcoded within the App.vue component. To ensure future enhancements, such as incorporating a flashcard API or developing a flashcard editor, your task is to refactor the hardcoded flashcard collection into a Pinia store.

    For this challenge you can simply move the existing hardcoded list into the flashcards store.

    To get started, click the Next step > button located below.

  2. Challenge

    Setting Up Pinia in the Project

    Your first task is to create a Pinia instance and pass it to the app as a plugin:

    To continue, click the Next step > button below.

  3. Challenge

    Building the Flashcard Store with Pinia

    Now that the Flashcard application is configured to use Pinia, your next task is to create the flashcards store. To continue, click the Next step > button below.

  4. Challenge

    Using the Flashcard Store in the Application

    The flashcard store is now accessible from any component within your application.

    At present, the flashcards are hardcoded in the App.vue file. You can open that file and refactor it to utilize the newly created flashcard store. To continue, click the Next step > button below.

  5. Challenge

    Enhancing the Flashcard Application and Additional Resources

    Congratulations on successfully integrating Pinia for state management in your Flashcard application!

    To see the application in action, simply click the Run button located in the lower right corner and open the provided link: {{ localhost:5173 }}.

    Feel free to keep enhancing the application as you wish. Thanks to the Vite server, any changes you make will be automatically recompiled.

    Here are some ideas to consider:

    • Add more flashcards directly to the array in the store.
    • Include an additional field in the flashcard objects and incorporate a visual element to display it within the FlashCard component.
    • Implement an action that allows the addition of new flashcards to the collection.

    To deepen your understanding of Vue and Pinia, you can explore the comprehensive documentation available at https://pinia.vuejs.org/. Additionally, Pluralsight offers courses that can further enhance your learning experience.

    Wishing you the best as you continue your learning journey with Pluralsight!

Jeff Hopper is a polyglot solution developer with over 20 years of experience across several business domains. He has enjoyed many of those years focusing on the .Net stack.

What's a lab?

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.