Solution: Utilizing the API Layer

Solution

The challenge required you to add a new api file with a method to fetch a list of users. This method should have been imported and used in the DisplayUsers component to fetch and render the users. Below are the required changes:

For the src/api/userApi.js file:

• Import the api object from the base api.js file and export the fetchUsers method that fetches a list of users from the jsonplaceholder.typicode.com/users.

For the src/components/DisplayUsers.vue file:

• Import the fetchUsers method from api/userApi.js file.
• Add a state to store an array of users.
• Create a new method called initFetchUsers that utilizes the fetchUsers function to fetch users and set them on the state.
• Initialize the initFetchUsers in the created lifecycle hook.

Let’s run the following code to understand how the above solution works.

Note: The code below may take a while to run. When the server starts, go to the app URL and see the output.