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 @submit.prevent syntax to avoid that behavior. Then wire together the @submit event 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.
[00:00] Now we can add a basic form. We'll get rid of the action with an input, with a type of text, and we'll use this input to submit new to-dos to our API. So we'll handle the submit event on the form and tell that to column method, which we'll call on submit.
[00:18] So down in our methods, we can say, "On submit" and then "alert yay." So let's save here, and the first thing you'll notice is that when you try and submit something and hit "enter," it'll do the alert and then we'll refresh the page because that's the default behavior of the submit event.
[00:39] A great convenience with view is you can say, "submit.prevent" and that means it'll prevent the default so when I hit "save" now, I can type "yay" hit "enter." It'll pop up the alert and it will not refresh this time. So to prevent that submit event from a refresh in the page, just do a .prevent here.
[01:01] Now let's track a value on our input using V-Model and we'll just name this "task" and for something to be on the V-Model, we have to define that in our data, so we'll say "data" which is actually a function which returns an object, and we'll say the task is just defaulting to SumTask, just a short working. Let's save here and you can see SumTask pops in automatically.
[01:27] So to get this value into on submit, we can just invoke on submit, pass in the task, then on submit receive the task, and then alert the task, hit save and you'll see I'll type in "something" hit enter. We get SumTask something, and everything is wired up properly.
[01:47] So from here to get this into the store, I'm going to bring in "map actions" from ViewX, and this behaves the same as the map mutations and map state where on my methods, I can spread this object we get back from map actions. I'll just do the array way. I can pass in a string, call this add, and then I can open up my index.js from my store, and start creating some actions.
[02:18] I create an action called "add" and add takes in the context and the thing we passed in which was the task. So this task is wired up to this task, and I need to make sure that on submit is now add because add is mapped to this add map actions means that this add is wired up to here. That event from submit is going all the way into our store and being handled here, the task is handled there.
[02:57] My context contains, so the structure of this contains something called "commit" which will commit something to our mutations. I can say from here that I want to commit to add and then an object with our task and complete is faults. Then I need to make this add that I'm committing to, to say, "add state to-do" and this to-do is this object. Then I can say that our "state.todo is an array with the previous to-dos and our new to-do."
[03:32] So hit save here, and now when I hit enter here to submit the form, I can add a bunch of tasks. For now, these will survive as I navigate around, but as soon as I refresh, they're gone because we are not posting them to the API. So, let's fix that by grabbing our API call, and I have a great example of that in our shared where we get the initial from axios, get the initial data.
[03:58] I'll copy and paste that into my store and say that I now want to post to this, and if I'm going to use a wait, I need to make sure that this function is a sync, so when I post, I'll get a response back from this. What I want to post is this object. The object that I was just pushing into the array before, I now want to post to my service.
[04:25] Bring this down to the next line just to make it more readable. Then, since we're awaiting for this to happen, once that's done, I can just go ahead and commit the response.data which will be the result back from my post call.
[04:39] So I'll go ahead and save here and now when I add SumTask and hit enter, it didn't work, but I'll check my console and it looks like I didn't define axios again since I copy and paste and I forgot to. So I'll go up and import axios from axios, hit save. Now, when I hit enter, you'll see that SumTask comes back. Now this time it does take like one beat.
[05:05] After I hit "enter," you'll see it takes us kind of one second to post, get the response back and update the array, and that's because it's actually posting and saving that to our API, so when I refresh now, I have my SumTask and my one beat. I go to complete it, and it's still there and I can refresh here as well.