Fetch data from an API using Pinia in Nuxt 3

[adamboother]

I'm struggling to work out the best way to fetch data from an API in Pinia within a Nuxt 3 project, in order to then be able to access that data in the store when my static site is generated.

I have seen suggestions for getters and actions, something along the lines of the below:

import { defineStore } from 'pinia';

export const todosStore = defineStore('todos', {
    state: () => ({
        todos: []
    }),
    getters: {
        // BEWARE: getter names cannot be same as state props!
        getTodos(state)
        {
            return state.todos;
        }
    },
    actions: {
        async getTestToDos()
        {
            fetch('https://dummyjson.com/todos')
                .then((response) => response.json())
                .then(({ data }) => (this.todos = data.todos))
                .catch((error) => console.log(error));
        }
    },
});

but I'm not sure which option is correct and how to then run the fetch and access the data within a component.

Any help would be appreciated!

[ikliko]

Hello,

This is how you should use it inside your component.

NOTE: I made a small change in the store that should not affect the functionality

// store
import { defineStore } from 'pinia';

export const useTodosStore = define store('todos', {
    state: () => ({
        todos: []
    }),
    getters: {
        getTodos: (state) => state.todos
    },
    actions: {
        async fetchTodos() {
            try {
                const response = await fetch('https://dummyjson.com/todos');
                const data = await response.json();
                this.todos = data.todos;
            } catch (error) {
                console.error('Error fetching todos:', error);
            }
        }
    }
});

// component
<script setup>
import { onBeforeMount } from 'vue';
import { useTodosStore } from '~/stores/todos';

const todosStore = useTodosStore();

onBeforeMount(async () => {
    await todosStore.fetchTodos();
});
</script>

<template>
  <div>
    <h1>Todos</h1>
    <ul>
      <li v-for="todo in todosStore.getTodos" :key="todo.id">{{ todo.todo }}</li>
    </ul>
  </div>
</template>

[adamboother]

Great, thanks for your help.