vue.js - vue3 组合 api 中的 vuex 模块 axios

Question

我是 vue 的新手，正在使用 vue 3 和组合 API。很难找到与组合 API 相关的东西，所以我尝试在这里寻求帮助。我将 axios 与 vuex 模块结合使用来使用 API。

如何将此代码从选项 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 }
   }
}

错误:未捕获( promise )TypeError:无法读取未定义的属性"dispatch"

Answer 1

您应该在初始化商店后运行该函数:

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