7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Registering Users: Creating a Vuex Action

The process of registering a user is very straightforward. We simply take the email address and password, and then we submit that to our server side application. Now, of course, we don't have the server side application yet, but I want to get the client stuff finished. At least as far as registration is concerned, so that then we can turn around implement that on the server and then have that portion working. So for this lesson, we're going to focus on three files. The first is going to be registered. The second is going to be our vuex store. And then the third is going to be one that we create. That's going to have some helper functions for issuing HTTP requests. Now, we're going to start inside of the register view because, well, that just makes sense. That's where the information is coming from. So we'll just implement the code here and then just go down the chain until we're done. So, we want to get the email address in the password. But let's first of all decide what API that we're going to use. Because this is view three, we have access to the options API, which is what we've been using in view, one and two. We can use the new composition API in view three, I like the composition API. So that's what we are going to use. Now, that does mean that we need to write a little bit of extra code because we no longer have access to this. So we cannot access our V model like email and and password with this. We can't access the store that way either, because we don't have this. Instead, what we need to do is import two functions. The first is going to be ref. From vue, the second is going to be the useStore function from vuex. There we go. That's all that we need to do. So now we just need to set up those things. So we will have our email view model, we will just simply call ref, that will give us that email view model. We want the same thing for the password. So let's just copy and paste, change the variable name and we're good to go. And really we do the same thing for the store except that we don't call ref. In this case, we call that useStore. Function. But there we go, we have the things that we need in order to get the values that we need as well as use our vuex store. Now let's write that on submit function because this is where we are gonna actually submit all of the stuff to the server, but we're not gonna do that directly here inside of our view. Instead, we're gonna use an action in our store. So we are gonna dispatch the registerUser action and we will pass in the information that we need. The first is gonna be the email so we will get the value of email. We'll do the same thing for password. And this is of course going to return a promise which we will want to do something after we get a response from the server. For right now we are just going to leave that as is. And then, at the end of the set up method, we are going to return things that we need access to such as email, password and onSubmit. Now, we should do some checking here, we need to make sure that we have an email and a password. But we can actually rely upon the browser to do those things. And of course, we could write our own validation stuff. But let's take the easy way out. Let's let the browser do it. So we're going to add to the required. Attribute to both, the fields for email and password. And of course on the server we will need to do our validation there as well. But with that in place, we can now go to our vuex store and we can implement this register user action. Now as far as this action method is concerned, we of course need the context because that is the first argument that's passed. But then we need the data. That's the stuff that we just passed to this. And we are going to write our own HTTP module, where we are going to post some Json data. We need to specify the URL. Which in our case is just going to be the endpoint. We aren't going to worry about the host or anything like that because the module is going to handle that. So we're just going to say that this is going to the register endpoint and we need to supply our data, now this postJson method is going to return a promise. So really what we need to do is return that. That gives us the ability inside of register to add a vin so that we can handle the response there. So next we just need to create our HTTP module. And the question then becomes, well, where do we put this particular file? I should we create another directory, that's going to have utilities and things like that, but I guess, that would make sense. So inside of source, let's create a new directory. Which we will call utils. And inside of that directory, we'll create a new file something called httpjs. And let's start with that postJson function. Now this is gonna accept the options here. And that is not the correct syntax. So there we go. We'll have our options and we are going to use fetch here. So let's just return fetch. The first argument that we need to pass is the URL. Now we do need our base URL for our server. So let's just call this base URL. And that will be simply http://localhost. And let's have the port of 8080 or what are we using here? We're already using 8080. So let's do something different, completely different. Let's do port 4000. And so whenever we make a request using fetch, then we can use string interpolation to include the base URL. Then we can tack on the URL from the options, so we will do that. Then the second argument is all of the information about the request itself such as the method. This is gonna be a post request, if we had any headers which we should because we are gonna send all of this as Json, we need to supply some headers. Right now though, let's add a body which is going to simply be the stringify or the serialised version of our data from options, so there we go. Let's go ahead and let's create a headers object because ultimately we're gonna have multiple headers. In this case we need the content type because we need to say that this is a The application Json content type. So let's go ahead and append that. And then whenever we have our token, then we can include that in the authorization header. But for registration, we don't need that. We will eventually come in here and we will add an if, if we have the token. Then blah, blah, blah, blah, blah. But this is going to be just fine for us. Let's do include headers here. And ultimately we will want to do some things whenever we get a response back. But for right now we are just going to simply convert the response from Json into a JavaScript object so that we can then use that in whatever is consuming In this post Json function, so now we just need module exports. And we will have that postJson method there. So that's inside of our vuex data store. We will import postJson from our utilities which will be in the parent directory. HTTP. So that then we will simply call postJson pass in all of the necessary information, and that should work. So with that in place. Let's go ahead and let's test this out. Let's pull up the developer tools. Yes, we don't have the server application. But we can at least see the request go out. So it doesn't matter what we type in here because nothing is going to be saved. And let's click register and nothing happens. Let's look at the console, cannot read property dispatch of undefined, so that was inside of register, dispatch, and we don't need to pass anything to use store. That's the problem there. So with that fix, let us do a hard refresh, I never trust this to load brand new code after an error like that. And let's go back to the network tab. Let's clear out all of the other requests. We click on. Register. And we can see that there are actually two requests, both of which are failed. Now, you might think, why do we have two? Well, that's a very good question, one of which we will answer in another lesson, but let's look at the headers. So the request header the application is Json, that's good. The request payload had our email address and password that's good. So as far as our client code is concerned, we are ready to go as far as registration is concerned so that in the next lesson, we can create our server application and get it set up to start handling requests.

Back to the top