How Do I Use Axios to Post Form Data?

Question

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.

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?

Note the areas I am running into are the "data: function()" in the component and the "submitProduct" action.

This is my Vue Component

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

This is my 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

There are multiple problems in your code:

1. You are using the data object of your component as models for your form, but you are never mutating your state with the changed values
2. You should make use of the context passed to each action inside the Vuex store (https://vuex.vuejs.org/guide/actions.html):

Change this:

submitProduct: function () {   
    axios.post('http://localhost:8081/product', {
      name: '' + this.data.name,
      description: '' + this.data.description
    }) 
}

To this:

submitProduct: function (context) {
  axios
    .post('http://localhost:8081/product', {
      name: '' + context.store.name,
      description: '' + context.store.description
    })
}

I would probably also suggest to not define component specific actions inside your store. Those action should be used for store related actions.

Answer 2

Figured it out.

Just had to do this to the action

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