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!