如何使用 axios 发布表单数据？

Question

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

使用 Vuex，我应该更新状态然后发布还是只使用操作将表单数据直接发布到我的后端？最佳做法是什么？我该怎么做？

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

这是我的 Vue 组件

<template>
  <div>
    <h1>Products</h1>
    <br/>
    <ul>
      <li v-for="product in products">{{product.name}} - {{product.description}}</li>
    </ul>
    <br/>
    <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
    }
  }
})

Answer 1

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

1. 您正在使用组件的 data 对象作为表单的模型，但您永远不会使用更改后的值来改变您的状态
2. 您应该利用传递给 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
    })
}

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

Answer 2

想通了。

只是不得不这样做

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