Quiz 6 Vue 3 and Pinia Basics

6. Quiz 6 Vue 3 and Pinia Basics#

In this quiz, you will build on your understanding of Vue 3 and Pinia by adding functionality to a User Management project.

Given a starter project with a basic UserStore and a list of random users here.

  1. Delete User

    • Add a delete button next to each user in App.vue. When clicked, this button should remove the user from the UserStore. You can implement this using either $patch or an action in UserStore.

  2. Automatic Refill When Empty

    • Use $subscribe on the UserStore to monitor the users state.

    • If the users list becomes empty, automatically call the fill action to fetch and refill random users from the Random User API.

  3. (extro credit) Add Sorting by First Name

    • In the UserStore, add a getter that returns users sorted by first name.

    • In App.vue, create radio buttons or checkboxes to enable users to toggle sorting on or off by first name.