我正在做一个有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>

这是我的博客

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
    }
  }
})