[Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js add Vuex action to handle an async post to an api. This lesson walks you through posting to an API using Vue.js, Vuex. and Nuxt.

 

<template>
     <form @submit="onSubmit(task)">
      <input v-model="task" type="text" />
    </form>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import {init} from './shared'

  export default {
    fetch: init,
    computed: {
      ...mapState({
        todos: (state) => state.todos
      })
    },
    data () {
      return {
        task: 'Some data'
      }
    },
    methods: {
     onSubmit(task) {
       alert(task)
     }
    }
  }
</script>

Notice that after reload the page, when the form submit, the page reloads. 

 

To prevent page reloads every time we submit the form we can use:

<form @submit.prevent="onSubmit(task)">

 

To deal with the store, we can use 'actions' in Vuex.Store and 'mapActions' helpers:

<template>
  <div>
    <form @submit.prevent="add(task)">
      <input v-model="task" type="text" />
    </form>
    <article class="pa3 pa5-ns">
      <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
        <li v-for="todo of todos" class="ph3 pv3 bb b--light-silver">{{todo.task}}</li>
      </ul>
    </article>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import {init} from './shared'

  export default {
    fetch: init,
    computed: {
      ...mapState({
        todos: (state) => state.todos
      })
    },
    data () {
      return {
        task: 'Some data'
      }
    },
    methods: {
      ...mapActions([
        'add'
      ])
    }
  }
</script>

We change form submit to:

<form @submit.prevent="add(task)">

The 'add' method map to action in store:

import Vuex from 'vuex'
import axios from 'axios'

const store = () => new Vuex.Store({
  state: {
    todos: [
    ]
  },
  mutations: {
    init (state, todos) {
      state.todos = todos
    },
    add (state, todo) {
      state.todos = [
        ...state.todos,
        todo
      ]
    }
  },
  actions: {
    async add (context, task) {
      const commit = context.commit
      const res = await axios.post('https://todos-cuvsmolowg.now.sh/todos', {
        task,
        complete: false
      })
      commit('add', res.data)
    }
  }
})

export default store

Inside, add function, we post the data to the backend, then we can use 'commit' method to mutate the data in the store.