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

Posted 2020-09-29 Answer1215

The default behavior of submitting an html form is to reload the page. You can use the Vue.js @submit.prevent syntax to avoid that behavior. Then wire together the @submitevent with an 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.