Question

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

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

请注意，我所遇到的区域是组件中的“数据：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

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

您正在使用组件的company.countries.all()对象作为表单的模型，但绝不会使用更改后的值来改变状态
您应该利用传递给Vuex存储（https://vuex.vuejs.org/guide/actions.html）内部每个动作的上下文：

更改此：

data

对此：

submitProduct: function () {   
    axios.post('http://localhost:8081/product', {
      name: '' + this.data.name,
      description: '' + this.data.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
    })
}

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

2 个答案: