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.