无法通过Store将表单用户输入数据存入REST API的技术咨询

首先先把你的表单代码整理完整（看起来最后一个input标签没写完，我帮你补全）：

<div> 
  <span>userId</span> 
  <input type="text" v-model="info.userId"> 
</div> 
<br> 
<div> 
  <span>id</span> 
  <input type="text" v-model="info.id"> 
</div> 
<br> 
<div> 
  <span>title</span> 
  <input type="text" v-model="info.title"> 
</div> 
<br> 
<div> 
  <span>body</span> 
  <input type="text" v-model="info.body"> 
</div>
<!-- 建议添加提交按钮触发提交逻辑 -->
<button @click="submitForm">提交表单</button>

下面针对Vue中最常用的两种状态管理方案（Vuex 和 Pinia），分别给出具体的解决步骤：

方案一：使用Vuex（Vue2常用） #

1. 配置Vuex Store的提交逻辑 #

先在你的Vuex Store中定义处理API提交的Action，同时可以按需维护表单状态：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios' // 用axios做HTTP请求，也可以替换成你习惯的库

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    submittedFormData: {} // 可选，用来存储提交后的返回数据
  },
  mutations: {
    UPDATE_SUBMITTED_DATA(state, data) {
      state.submittedFormData = data
    }
  },
  actions: {
    async submitFormToAPI({ commit }, formData) {
      try {
        // 替换成你的实际API接口地址
        const response = await axios.post('https://your-api-url.com/save', formData)
        // 如果需要把返回数据存到Store，调用mutation
        commit('UPDATE_SUBMITTED_DATA', response.data)
        return response // 返回结果给组件做后续处理
      } catch (error) {
        console.error('表单提交失败:', error)
        throw error // 抛出错误让组件捕获处理
      }
    }
  }
})

2. 在组件中调用Store的Action #

在你的表单组件里，绑定提交方法并调用Store的Action：

// 你的表单组件.vue
export default {
  data() {
    return {
      info: {
        userId: '',
        id: '',
        title: '',
        body: ''
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        // 调用Store中的提交Action
        await this.$store.dispatch('submitFormToAPI', this.info)
        alert('提交成功！')
        // 提交后重置表单
        this.info = { userId: '', id: '', title: '', body: '' }
      } catch (err) {
        alert('提交失败，请检查网络或数据格式')
      }
    }
  }
}

方案二：使用Pinia（Vue3推荐） #

1. 创建Pinia Store #

// stores/formStore.js
import { defineStore } from 'pinia'
import axios from 'axios'

export const useFormStore = defineStore('form', {
  state: () => ({
    submittedResult: {}
  }),
  actions: {
    async submitFormToAPI(formData) {
      try {
        const response = await axios.post('https://your-api-url.com/save', formData)
        this.submittedResult = response.data
        return response
      } catch (error) {
        console.error('提交出错:', error)
        throw error
      }
    }
  }
})

2. 在Vue3组件中使用 #

// 你的表单组件.vue
import { useFormStore } from '@/stores/formStore'
import { ref } from 'vue'

export default {
  setup() {
    const formStore = useFormStore()
    
    const info = ref({
      userId: '',
      id: '',
      title: '',
      body: ''
    })

    const submitForm = async () => {
      try {
        await formStore.submitFormToAPI(info.value)
        alert('提交成功！')
        info.value = { userId: '', id: '', title: '', body: '' }
      } catch (err) {
        alert('提交失败，请重试')
      }
    }

    return {
      info,
      submitForm
    }
  }
}

关键注意事项 #

• 确保你已经安装了HTTP请求库（比如npm install axios），如果用浏览器原生Fetch API也可以替换对应代码
• 检查API端点是否支持POST请求，跨域问题需要后端配置CORS或者本地开发时配置代理
• 提交前可以添加表单验证逻辑，避免无效数据提交到API
• 确认Store已经正确注入到Vue实例中（Vuex需要在main.js中挂载，Pinia需要在main.js中创建并挂载）

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