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代码，其中我声明了名为＆＃34; info＆＃34;的对象。这将保存我的表格的所有文件，还有＆＃34; addtoAPI＆＃34;基本上访问商店行为的方法

    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中，您犯了一个错误，您正在尝试访问info的{{1}}属性（这就是为什么它会导致错误this ）：

undefined

需要替换为：

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

无法使用商店

1 个答案: