使用Pinia与Nuxt无法获取本地接口数据，求代码排查方案

云上老周

2026-8-5

解决从本地接口获取数据的问题

1. 调用Pinia中的`getPosts`方法

你的代码仅实例化了Pinia store，但从未调用getPosts方法发起数据请求，这是核心问题。在app.vue的<script setup>中添加调用逻辑：

<script setup>
import { usePostStore } from './stores/blogStore'
import { onMounted } from 'vue'

const store = usePostStore()

// 组件挂载后触发数据请求
onMounted(() => {
  store.getPosts()
})
</script>

2. 完善错误调试与处理

原代码的console.log无有效参数，无法排查请求问题，修改getPosts方法添加详细日志：

async getPosts() {
    this.loading = true
    console.log('开始请求数据...')
    const api = "http://localhost:3000/posts"
    try {
        const res = await fetch(api)
        console.log('接口响应状态:', res.status)
        if (!res.ok) {
            throw new Error(`请求失败: ${res.statusText}`)
        }
        const data = await res.json();
        console.log('获取到的数据:', data)
        this.posts = data;
    } catch (err) {
        this.error = err.message
        console.error('请求出错:', err)
    } finally {
        this.loading = false
    }
},

3. 验证接口可用性

直接在浏览器地址栏输入http://localhost:3000/posts，确认是否返回JSON格式数据。若无法访问，先检查后端服务是否启动、端口是否正确。
使用Django REST Framework时，需配置CORS（安装django-cors-headers并在settings中启用），否则前端会因跨域限制无法请求数据。