vue3 구성 API의 vuex 모듈 속성

vue3 구성 API의 vuex 모듈 속성

vue는 처음이고 vue 3과 컴포지션 API로 작업하고 있습니다.컴포지션 API와 관련된 것을 찾는 것은 매우 어렵기 때문에 도움을 청하려고 합니다.API를 사용하기 위해 vuex 모듈과 Axios를 조합하여 사용하고 있습니다.

이 코드를 옵션 API에서 컴포지션 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>

저는 이런 걸 해봤어요.하지만 작동하지 않습니다.

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 }
   }
}

오류: 캡처되지 않음(예약 없음)TypeError: 정의되지 않은 속성 '디스패치'를 읽을 수 없습니다.

스토어를 초기화한 후 기능을 실행해야 합니다.

    setup(){
      
      const store = useStore()
       getData();
 ...

언급URL : https://stackoverflow.com/questions/68908674/vuex-module-axios-in-vue3-composition-api