title: How Do I Use Axios to Post Form Data?
body: <p>I am working on a project with a springboot backend and Vue frontend. Right now I am able to GET a list of products from my DB. I can GET the list and display it on a page but I am trying to use a form to POST a new product. I was able to successfully setup a POST method but can only send hard coded info.</p>
  
  <p>With Vuex should I be updating the state and then posting or just use the action to post the form data to my backend directly? What is best practice and how do I do it?</p>
  
  <p>Note the areas I am running into are the "data: function()" in the component and the "submitProduct" action.</p>
  
  <p>This is my Vue Component</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Products&lt;/h1&gt;
      &lt;br/&gt;
      &lt;ul&gt;
        &lt;li v-for="product in products"&gt;{{product.name}} - {{product.description}}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;br/&gt;
      &lt;form id="newproductform" @submit="submitProduct"&gt;
        &lt;h4&gt;New Product&lt;/h4&gt;
        &lt;p&gt;
          &lt;label for="name"&gt;Name: {{name}}&lt;/label&gt;
          &lt;input type="text" name="name" id="name" v-model="name"&gt;
        &lt;/p&gt;
  
        &lt;p&gt;
          &lt;label for="description"&gt;Description: {{description}}&lt;/label&gt;
          &lt;input type="text" name="description" id="description" v-model="description"&gt;
        &lt;/p&gt;
  
        &lt;p&gt;
          &lt;input type="submit" value="Submit"&gt;
        &lt;/p&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {mapState, mapGetters, mapActions} from 'vuex'
  
  export default {
    name: 'Products',
    data: function () {
      return {
        name: '',
        description: ''
      }
    },
  
    computed: {
      ...mapState({
        products: state =&gt; state.products
      }),
  
      ...mapGetters({
      })
    },
  
    methods: {
      ...mapActions({
        loadProducts: 'loadProducts',
        submitProduct: 'submitProduct'
      })
    },
  
    created () {
      this.loadProducts()
    }
  }
  
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>This is my store.js</p>
  
  <pre><code>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 =&gt; state.products
    },
  
    actions: { // actions store methods
      // action (context)
      loadProducts: function ({commit}) {
        axios
          .get('http://localhost:8081/product')
          .then(request =&gt; request.data._embedded.product)
          .then(product =&gt; {
            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
      }
    }
  })
  </code></pre>