Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:12Length:1.6 hours

Next lesson playing in 5 seconds


Free Preview: Vuex for Efficient Vue State Management


  • Overview
  • Transcript

Managing state in large web apps can be messy—and Vue.js is no exception. But the Vuex library can eliminate a lot of the headaches related to managing state in Vue apps.

In this course, Jeremy McPeak will teach you how to use Vuex to manage state in your Vue-powered applications. Follow along with this course and you’ll build a practical to-do list app, and learn how to use Vuex for state along the way. You'll start with basic concepts and tracking simple state with Vuex. Then you'll go on to changing the state with mutations and actions, before tackling advanced topics like getters and modules. So follow along and you'll get a complete introduction to Vuex.

1. Introduction

1.1 Introduction

Managing state in large applications can be messy. Well, it's not really a matter of can be, because let's face it, it usually is. And that is why frameworks like Vue and React rely on a separate but integrated library for managing states. For Vue, we use Vuex. Hi, I am Jeremy McPeak, and I invite you to spend some time with me as I walk through how to use Vuex in your applications. Now, I took my sweet time learning Vuex, but once I did, I kicked myself for not spending the time sooner to learn the library. And I use it in just about every application, large and small. So in this course, we will build a mock application. Yes, it's not going to work, and we will, in fact, break it later in the course. But in going through the process of building and breaking our project, you will learn how to use Vuex to manage and work with your applications state, mutations, actions, getters, modules, and helpers. You will learn how to do it all. So when you're ready, cue up the next video and we will get started.

2. Getting Started

2.1 Setting Up the Project

Well, we are just going to jump right in and start writing our project. And we're going to create our project using the Vue CLI. Now if you don't have Vue CLI installed, then of course you want to do that. But let me very briefly go over what you need to follow along in this course and the list is very short. So if you don't have Node.js in your development environment, you need to install that even if you don't plan on writing Node-oriented applications. Because this gives us Node Package Manager, or NPM. And that's what we use to manage our dependencies, as well as do a whole bunch of other stuff. And we also need it for Vue CLI. So go to Node.js.org, download and install the LTS version. I'm not going to go into the whole spiel between the different versions. Just stick with the LTS, that says for long term support, and the installation is very straight forward. Just take the defaults and you'll be good to go. Then in the command line, we want to run this, npm install -g @vue/cli. This is going to install the Vue CLI globally. And that's what we want because that gives us access to the Vue command so that we can use the Vue command to create projects and whole bunch of other stuff. Now, the installation might take a few minutes, so feel free to wait for that to complete before you type, vue create, and then our project name. Now we are going to be writing a to-do application, but let's call it vuedo, just to be a little bit different. And it's going to walk us through, asking us questions about what we want to include with our project. Now, I covered Vue CLI in another course for Tuts+. And so don't panic if you don't see these two presets here. You will see default, and you will see manually select features. Let's manually select the features, because this gives us the ability to go ahead install Vuex. So we want Babel, I guess we could specify the router, and we want to Vuex. If you want the linter, feel free to go that route. I'm not going to do that because then we have to answer even more questions and I'm just ready to get started. So you definitely want Babel. The router, we may or may not use that, we'll just see. And then, of course, Vuex. And then it's gonna ask if we want to use history mode for the router. Now, since we aren't going to have really a server-side of our application, at least for this course, then I'm just going to choose no as my answer. For a real world application, you would want to use history mode, so you would want to answer yes there. And we want our config and dedicated files. And no, let's not save this as a preset. And this is going to create our project. And this may take a few minutes, but that's okay. Now this is going to give us a Vuex automatically. And normally what I would want to do, as far as a lesson is concerned, is go through the process of adding Vuex to a project. But that's very straightforward. I mean, if you're using an NPM or you're using Yarn, then of course, you just use those tools to add a Vuex to your project, and then you're pretty much ready to go. There's a few things that you have to do as far as the code is concerned, but as far as getting Vuex, that's it. So this way, we have it already set up and ready to go. And all we will have to do is just very briefly go over what we need to do in order to use Vuex with our project. So now let the project is ready, I'm going to cd into vuedo. And I'm going to start up the code editor. Now, there is still some things that we need to install, like bootstrap, so let's go ahead and install those things. We, of course, want bootstrap jquery and popper.js, and we want to save those. And while that is going to be installing, we can take a brief look at our project and more specifically, the Vuex store. So you can see that there is this store.js file. And of course, we're not married to this layout. If we wanted to change that, we could. But for right now, were going to just leave this as is. And if we open up store.js, we can see, well, what's going on? In order to use Vuex, you create a Vuex.store object. And you can see that there are three main pieces to this object. There's the state, there's mutations and actions. And of course, we will be going over those things throughout this course. But you can see that this object has been created. It is then going to be brought into the main.js file. There it is, imported right there. And that store object is passed on to the Vue instance to kick start our application. So that's really all it is as far as the setup is concerned. Now of course, there is some code that we have to write in order to actually make some use of this, but we will be doing that as we write our application. Then we're going to be doing this instead of using our own object to maintain state and all of that. Because eventually what we want to do is start pulling in information over HTTP. And so if we go ahead and just start using Vuex from the get go, it's going to make that just a little bit easier. So that's basically it. If you were going to add Vuex to an existing application, or if you were going to set it up yourself, you would, of course, install it with NPM or Yarn. And then you would create a new Vuex.store instance and then pass that instance to the Vue constructor whenever the application is started. All right, so of course, what we want to do is get this up and running. Unfortunately, bootstrap is still installing. So let's go ahead and set those up though, so that we have already done that. We're going to import bootstrap. So that is going to give us bootstrap. And of course, we also want to include the actual css so that Webpack is going to be processing all of that. So that is going to be from bootstrap/dist/css and then bootstrap.min.css. And that's going to give us that. Now, as far as the components are concerned, this gives us a HelloWorld. We're not going to be using that. So let's go ahead and delete that. That's going to cause our application not to work if we were going to run this, which we can if we wanted to. I'm going to run this from the terminal from inside of Code. That's just something that I've started to do instead of having an external command line. So if you look at the instructions, and of course, that to cd into a new project, and then to run npm run serve. So we will do that. This is going to run our application. It's also going to watch our files, so that if there are any changes, then it's going to do the necessary recompilation. And we will be up and running so that we don't have to do a whole lot of refreshes and things like that. Although, there are some cases where will have to, but we will cross that bridge when we get there. Now that HelloWorld component that we just deleted is actually referenced inside of Home. So what I want to do is delete every instance that the HelloWorld component was used. And then that should make our application at least compile. And, well, I'm not doing that. Let me pull up the terminal, let's see what we get. And it can't find a dependency because, well, that dependency doesn't exist. It helps if you type it correctly. It's not booststrap, it's bootstrap. There we go. So that should get that working. And then we can start focusing on the layout. And the layout is going to be very, very bootstrapy, because we are, of course, using bootstrap. So let's open up the App component, so that is App.vue. And of course, there is this stuff that's already there. I'm going to paste in the markup that I have. And really, it's nothing more than just adding a nav bar and then wrapping the router-view component with a container. So that's basically it. As far as the style is concerned, we're not going to use anything that was provided from the scaffolding. And I'm going to paste in some CSS because I want to have a shadow on the nav bar. You can see that there is a shadow there. So we're going to have that. Let's see if the application is up and running. And once again, it really helps if you type the correct word, bootstrap. All right, so with that finally done, it's going to build. We have localhost port 8080. So fire up your browser and we will be able to at least see this in the browser. So once again, that was localhost:8080, and there we go. We have the nav bar at the top, our little shadow there. And of course, this is being brought in from the Home view. So if we go back to our code editor and go to the Home view, we can just get rid of that image completely, and that will be that. I'm gonna close this other window so that just have the two open, and we are ready to get started. So in this lesson, all we did is just create our application. You also learned how to set up or at least add Vuex to a project. We, of course, cheated a little bit and let Vue CLI scaffold all of that for us. But really, it's very straightforward.