无法使用商店将用户输入添加到休息 api

Question

这是我的主页，我在其中有一个表单，我想将其与 API 集成，以便我可以在那里保存我的数据：

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

<input type="submit" @click="addtoAPI">

这是 mainpage.js 代码，我在其中声明了名为 "info" 的对象，它将保存我表单的所有字段，还有 "addtoAPI" 方法，它基本上访问商店的动作

    data(){
        return{
         info:{
           userId:'',
           id:'',
           title:'',
           body:''
         }
        }
      },
     methods:{
     addtoAPI(){
       this.$store.dispatch('addtoapi',this.info)
     }

这是我的 store.js 代码，我在其中添加了一个名为 addtoapi 的操作，它基本上将数据存储在各个字段中

 actions: {
         addtoapi :({commit},info) =>{
                let newuser={
                  userId:this.info.userId,
                  id:this.info.id,
                  title:this.info.title,
                  body:this.info.body
                }
                console.log(newuser);
               axios.post('https://jsonplaceholder.typicode.com/posts/',newuser)
                  .then((response) =>{
                    console.log(response);
                  })
                  .catch((error) => {
                    console.log(error);
                  })
              }
    }

现在，当我运行出现此错误时，请帮助我，因为我已经添加了 userId。

store.js?adc6:50 Uncaught TypeError: Cannot read property 'userId' of undefined
        at Store.addtoapi (store.js?adc6:50)
        at Array.wrappedActionHandler (vuex.esm.js?358c:704)
        at Store.dispatch (vuex.esm.js?358c:426)
        at Store.boundDispatch [as dispatch] (vuex.esm.js?358c:332)
        at VueComponent.addtoAPI (Mainpage.js?4af6:45)
        at invoker (vue.esm.js?efeb:2027)
        at HTMLInputElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

Answer 1

在您商店的 actions 中，您犯了一个错误，您正在尝试访问 this 的属性 info（这就是它抛出错误的原因undefined) :

let newuser= {
      userId:this.info.userId,
      id:this.info.id,
      title:this.info.title,
      body:this.info.body
 }

需要替换为：

let newuser = {
    userId: info.userId,
    id: info.id,
    title: info.title,
    body: info.body
}

无法使用商店将用户输入添加到休息 api

not able to add user input into a rest api using store

api

vue.js

store

axios

vuex