如何使用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
    })
}