vuex module axios in vue3 composition api - vue.js

Question

I am new to vue and working with vue 3 and the composition API. It is really hard to find stuff related to the composition API, so I try to get help here. I am using axios in combination with vuex modules for consuming APIs.
How can I transfere this code from options API to composition API?
TestApi.js
import axios from 'axios'
const posts = {
namespaced: true,
state: {
posts: []
},
mutations: {
SET_POSTS(state, data){
state.posts = data
}
},
actions: {
loadPosts({commit}) {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then( res => {
commit('SET_POSTS', res.data)
} )
.catch(error => console.log(error))
}
},
getters: {
getPosts(state){
return state.posts
}
}
}
export default posts
App.vue
<template>
<div class="post" v-for="post in getPosts" :key="post.id">
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { computed } from 'vue'
export default {
computed: {
...mapGetters('posts', ['getPosts'])
},
created(){
this.$store.dispatch('posts/loadPosts')
}
}
</script>
<style>
.post{
margin-bottom: 20px;
}
</style>
I tried something like this. But it does not work:
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup(){
getData();
const store = useStore()
function getData(){
store.dispatch('posts/loadPosts');
}
const getPosts = computed(() => store.getters['getPosts'])
return{ getPosts }
}
}
Error: Uncaught (in promise) TypeError: Cannot read property 'dispatch' of undefined

Answer 1

You shoul run the function after initializing the store :
setup(){
const store = useStore()
getData();
...