How to correctly handle information fetch from an API with Pinia in Vue.js 3?

Using Pinia in Vue.js 3 to manage data retrieved from API is a recommended practice, as Pinia provides a centralized and efficient approach to state management. Below, I will provide a detailed explanation of how to use Pinia to handle data retrieved from API.

Step 1: Setting Up Pinia

First, verify that Pinia is installed in your project. Install it using the following command:

bash
npm install pinia

Then, import and initialize the Pinia store in your Vue.js project, typically within main.js or main.ts:

javascript
import { createApp } from 'vue';
import { createPinia } from 'pinia';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

Step 2: Creating a Pinia Store

Define a Pinia store to manage API data. For instance, when handling user data, create a store named useUserStore.

javascript
// stores/user.js
import { defineStore } from 'pinia';
import axios from 'axios';

export const useUserStore = defineStore('user', {
    state: () => ({
        users: [],
        isLoading: false,
    }),
    actions: {
        async fetchUsers() {
            this.isLoading = true;
            try {
                const response = await axios.get('https://api.example.com/users');
                this.users = response.data;
            } catch (error) {
                console.error('Failed to fetch users', error);
            } finally {
                this.isLoading = false;
            }
        }
    }
});

Step 3: Using the Store in Components

Within Vue components, utilize this store to fetch data and render it in the UI.

vue
<template>
  <div>
    <button @click="fetchUsers">Load Users</button>
    <div v-if="isLoading">Loading...</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user';

export default {
  setup() {
    const userStore = useUserStore();

    const fetchUsers = () => {
      userStore.fetchUsers();
    };

    return {
      fetchUsers,
      isLoading: userStore.isLoading,
      users: userStore.users
    };
  }
};
</script>

Example Explanation

In this example, we define a Pinia store named user with a state users for storing user data and a state isLoading to indicate loading status. We implement an action fetchUsers to asynchronously retrieve data from the API, updating isLoading appropriately before and after the operation.

In the component, invoke fetchUsers to fetch data and bind both the data and loading state to the template for user visibility.

By following this approach, you can effectively manage API data using Pinia and display it within Vue components.