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!