Getting a promise instead of the data i receive from pinia store - pinia

Question

I have succesfully fetched data from an api into my pinia store, I am getting back the json data, when i call the action from my nuxt3 component, im getting a promise.
My store:
import { defineStore } from 'pinia';
export const useCountriesStore = defineStore("countries", {
state: () => ({
countries: [],
isLoading: false
}),
actions: {
async fetchCountries() {
this.isLoading = true;
const res = await fetch('https://restcountries.com/v3.1/all')
const data = await res.json();
this.countries = data;
console.log(data);
this.isLoading = false;
}
},
getters: {
getCountries: (state) => state.countries
}
})
My nuxt component:
<script lang="ts">
import { useCountriesStore } from '#/stores/countriesStore';
export default {
setup(){
const countriesStore = useCountriesStore();
const countriesData = countriesStore.fetchCountries();
console.log(countriesData)
}
}
</script>
This is the link to my github branch: https://github.com/AbbyNyakara/CountriesDirectory/tree/add-store
p/s: I have attached a screenshot of the data when i console log my store vs component
I have tried to fetch the data from my pinia store unsuccesfully

Answer 1

You are missing a return value in action fetchCountries
async fetchCountries() {
this.isLoading = true;
const res = await fetch('https://restcountries.com/v3.1/all')
const data = await res.json();
this.countries = data;
console.log(data);
this.isLoading = false;
return data;
}
And wait for the execution using async / await
<script lang="ts">
import { useCountriesStore } from '#/stores/countriesStore';
export default {
async setup(){
const countriesStore = useCountriesStore();
const countriesData = await countriesStore.fetchCountries();
console.log(countriesData)
}
}
</script>