Vue3组合式API中如何迁移Vuex模块化+Axios的Options API代码？

问题原因 #

• 执行顺序错误：你在setup中先调用了getData()，之后才初始化store实例，执行请求时store还未赋值，自然是undefined，找不到dispatch方法。
• 命名空间getter调用错误：你的posts模块开启了namespaced: true，调用对应getter需要带上模块名前缀，不能直接写getPosts。
• 额外注意：不要直接在setup顶层执行异步请求，放到生命周期钩子中调用更符合Vue3的规范，避免意外问题。

修复后的代码 #

写法1：使用setup选项 #

import { useStore } from 'vuex'
import { computed, onMounted } from 'vue'

export default {
  setup() {
    // 第一步先初始化store实例
    const store = useStore()
    
    function getData() {
      store.dispatch('posts/loadPosts')
    }
    
    // 命名空间getter格式为 模块名/getter名
    const getPosts = computed(() => store.getters['posts/getPosts'])
    
    // onMounted 等价于原Options API的created阶段逻辑
    onMounted(() => {
      getData()
    })
    
    return { getPosts }
  }
}

写法2：更推荐的<script setup>语法（Vue3标准写法） #

完整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 setup>
import { useStore } from 'vuex'
import { computed, onMounted } from 'vue'

const store = useStore()
const getPosts = computed(() => store.getters['posts/getPosts'])

onMounted(() => {
  store.dispatch('posts/loadPosts')
})
</script>

<style>
.post{
  margin-bottom: 20px;
}
</style>

补充检查项 #

如果修改后仍有问题，确认你的Vuex注册逻辑正确：

1. store/index.js 中已经正确引入并注册posts模块：

import { createStore } from 'vuex'
import posts from './TestApi.js'

export default createStore({
  modules: {
    posts
  }
})

2. main.js 中已经全局挂载store：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

内容的提问来源于stack exchange，提问作者kate9247