首页 文章

如何使用Axios发布表单数据?

提问于
浏览
0

我正在开发一个带有springboot后端和Vue前端的项目 . 现在我能够从我的数据库中获取产品列表 . 我可以获取列表并将其显示在页面上,但我正在尝试使用表单来发布新产品 . 我能够成功设置POST方法,但只能发送硬编码信息 .

使用Vuex我应该更新状态然后发布或只是使用操作将表单数据直接发布到我的后端?什么是最佳实践,我该怎么做?

请注意我遇到的区域是组件中的“data:function()”和“submitProduct”操作 .

这是我的Vue组件

<template>
  <div>
    <h1>Products</h1>
    
<ul> <li v-for="product in products">{{product.name}} - {{product.description}}</li> </ul>
<form id="newproductform" @submit="submitProduct"> <h4>New Product</h4> <p> <label for="name">Name: {{name}}</label> <input type="text" name="name" id="name" v-model="name"> </p> <p> <label for="description">Description: {{description}}</label> <input type="text" name="description" id="description" v-model="description"> </p> <p> <input type="submit" value="Submit"> </p> </form> </div> </template> <script> import {mapState, mapGetters, mapActions} from 'vuex' export default { name: 'Products', data: function () { return { name: '', description: '' } }, computed: { ...mapState({ products: state => state.products }), ...mapGetters({ }) }, methods: { ...mapActions({ loadProducts: 'loadProducts', submitProduct: 'submitProduct' }) }, created () { this.loadProducts() } } </script> <style scoped> </style>

这是我的store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex)
Vue.use(VueAxios, axios)

export default new Vuex.Store({
  modules: {},

  state: { // data
    products: []
  },

  getters: { // computed properties
    // getter (state, getters)
    allProducts: state => state.products
  },

  actions: { // actions store methods
    // action (context)
    loadProducts: function ({commit}) {
      axios
        .get('http://localhost:8081/product')
        .then(request => request.data._embedded.product)
        .then(product => {
          commit('setProductToState', product)
        })
    },

    addNewProductToState: function ({commit}) {
      commit('setNewProductToState')
    },

    submitProduct: function () {
      axios
        .post('http://localhost:8081/product', {
          name: '' + this.data.name,
          description: '' + this.data.description
        })
    }
  },

  mutations: {
    // mutation (state, payload)
    setProductToState (state, product) {
      state.products = product
    }
  }
})

2 回答

  • 0

    您的代码中存在多个问题:

    • 您正在使用组件的 data 对象作为表单的模型,但是您永远不会使用更改的值来改变您的状态

    • 您应该使用传递给Vuex商店内的每个操作的上下文(https://vuex.vuejs.org/guide/actions.html):

    改变这个:

    submitProduct: function () {   
        axios.post('http://localhost:8081/product', {
          name: '' + this.data.name,
          description: '' + this.data.description
        }) 
    }
    

    对此:

    submitProduct: function (context) {
      axios
        .post('http://localhost:8081/product', {
          name: '' + context.store.name,
          description: '' + context.store.description
        })
    }
    

    我可能还建议不要在商店内定义特定于组件的操作 . 这些操作应该用于与商店相关的操作 .

  • 0

    弄清楚了 .

    只是必须这样做的动作

    submitProduct: function () {
      const name = document.getElementById('name').value
      const description = document.getElementById('description').value
      axios
        .post('http://localhost:8081/product', {
          name: name,
          description: description
        })
    }
    

相关问题