situations, you may find yourself just passing the same prop all the way down, and that ends up being really tricky. Or maybe you fire events to get this information. Or maybe you have just kind of a global object that you use to share state anywhere. That can be really useful. Or you can use Vuex. So let's take a look at this. Yeah, we're going to use this counter example. So here's how I like to learn. I think counter, especially for JavaScript, is incredibly useful for first step. It requires zero learning on your part. You just need to know, okay, I need some state to manage the current count. I need a Vue layer. And then I need some way to manipulate that state. All right, so let's work on this together. And we'll see the structure, how to pull in Vuex, and all of that. So I'm going to use Laravel, but not really for anything PHP. Just for the structure. It'll be familiar to you, very likely. And then we get Laravel Mix ready to go pretty quickly. So we'll

So I'm going to use Laravel, but not really for anything php. Just for the structure. It'll be familiar to you, very likely. And then we get Laravel Mix ready to go pretty quickly. So we'll call this Vuex learning. Now I am a bit under the weather, so I apologize for being a little cracky in the voice. All right, so we can switch into that. And I'm going to use Visual Studio Code for this video. Or I'm sorry, Visual Studio Code. I keep hearing people brag about it, so I'd like to spend some more time with it. Okay, so yeah, you may know with Laravel, we get Mix out of the box. So we do need to install those dependencies. Now, while that's doing its thing, yeah, let's switch into our resources/assets/js directory. And we'll see here within app, yeah, why don't we repurpose our example component to Counter. So we'll call that Counter. And then if we go into Counter, yeah, I can quickly rename this file to counter.vue. Okay, so within here, yeah, to start,

our example component to Counter. So we'll call that counter. And then if we go into counter, yeah, I can quickly rename this file to counter.vue. Okay, so within here, yeah, to start, we're just going to spit out the current count. So why don't we do this the standard way of this component maintaining its current state, which in reality, you probably would never need to share this counter state anywhere else. So maintaining it locally, I would say, is very much the right way to go. But nonetheless, we still want to see the Vuex way to do it. So anyways, we'll say here data, our current count will default to zero. Okay, so we can see we are newing up a Vue instance and binding it to an element called app. And then we have a global counter component. So I'm going to go to my welcome.blade.php page that comes with Laravel, get rid of all of that junk here. So we'll have a div with an ID of app. And then within it, we want our counter, right?

So I'm going to go to my welcome page that comes with Laravel, get rid of all of that junk here. So we'll have a div with an ID of app. And then within it, we want our counter, right? And you know what, actually, in Visual Studio Code, let's see what kind of Vue stuff we can pull in. All right, there's an extension pack. Yeah. Okay, so let's pull that in and reload. Okay, so I think that should do some stuff like auto completing of tags. Yeah. Okay, cool. So anyways, our final step is to import our compiled script, right? So js/app.js. And then finally, we can boot this up, like so. Okay, great. So let's view this in the browser, vuexlearning.dev, just booting up a server here. Yeah, and sure enough, we do see our counter. So at this point, we could switch back and we could have some logic here. So we could say like a little button to if we click on it, then we want to increment the value, right? Okay, so now

So at this point, we could switch back and we could have some logic here. So we could say like a little button to if we click on it, then we want to increment the value, right? Okay, so now this is all basic Vue. So if we say increment, then we could say this.count++. So then when we change the state, because right now this is our single source of truth for this component. So if we change that, Vue has reactivity. So this will automatically re-evaluate. So if we come back and give it a refresh, plus one. Yeah, you have a basic counter with Vue, and it just doesn't require much work, right? But now if we want to switch over to Vuex, or think about it, if you did decide that other components in your app need to track this counter, they need to be informed about its current state. Yeah, that's where it gets tricky, where maybe when you change this value, you end up firing an event, or maybe you have like a global

they need to be informed about its current state. Yeah, that's where it gets tricky, where maybe when you change this value, you end up firing an event, or maybe you have like a global bus where you emit an event, and then they will listen for that. And that's where you just end up in that funky situation where you're maintaining different objects, but you're trying to keep everything in sync. In those situations, yeah, it's a good case of wanting to take the state and moving it outside of the component entirely. So let's switch back and see the documentation. Okay, so yeah, so here's how Vuex basically works. It's split into these different structures. So you have a single state object, and that's where basically your entire application state will be stored. So that would be the equivalent to something like this, okay? But you would never change that state directly with Vuex. Instead, you would use mutations,

Nope, you should use this if you've suddenly realized, oh, I very much need something just like this. Okay, so getting started. All right, so we can see that we build up a new Vuex store. And yeah, you'll see you have your state. Once again, think of that sort of like this. So what is the state that we are going to keep track of? And then we use mutations to change that state. So let's give this a shot. We do need to pull in Vuex. And then back in code. So let's say let Vuex = require('vuex'). Well, really, we should be using import here. So let's say import Vue from 'vue'. And then import, let's update that. And then import Vuex from 'vuex', like so. And then once it's gzipped, I guess that ends up being about 4k. All right, and then finally, we say Vue.use(Vuex). Okay, so yeah, we're going to try out a basic store. I'm going to do it inline and then later,

I guess that ends up being about 4k. All right, and then finally, we say Vue.use Vuex. Okay, so yeah, we're going to try out a basic store. I'm going to do it inline and then later, maybe we'll extract it to a module or something. So I could say new Vuex.Store, where we have our state. And to start, we're setting count to zero. And then we have these mutations here. So think of these as ways to change the state. So if I were to say increment, well, that will give us access to the state object. So I can very easily just say state.count++. So now we have our store, and I'm going to store it on the window just to start. Okay, so we have this global object called store. So we want to switch over to using that on the counter. Okay, so now counter will no longer have this. And that means the increment method here is no longer correct. So how do we communicate that we want to perform an increment? Well, if we switch

Okay, so now counter will no longer have this. And that means the increment method here is no longer correct. So how do we communicate that we want to perform an increment? Well, if we switch back, yeah, we can see store. So we don't reference a mutation method directly like this. We instead commit, almost like firing an event. And the value for the commit will be the method that gets called here. So I think we should be able to say window.store. Later, we're going to make store available to all components, but just make it kind of easy to take in at the start. So window.store.commit, increment. But now we don't even have access to count anymore because we got rid of that data object. So we can traditionally use computed properties for this. So I could say if you want the count, then that's going to, well, we're going to reach into our global Vuex store. So store.state.count. Return window.store.state.count. Okay, so let's switch

if you want the count, then that's going to, well, we're going to reach into our global Vuex store. So store.state.count. Return window.store.state.count. Okay, so let's switch over to Chrome, give it a refresh. And yeah, now we have exactly what we had before, but we're using Vuex. So you'll see that we stripped out all of the source of truth for the counter. Because again, the idea is we would have multiple components that need access to the state. So we basically strip that state from being managed locally, and we instead let the store, the Vuex store, be responsible for holding that data, mutating it, even filtering upon it if you need to. And then further, if we open up Chrome DevTools, if you have Vue DevTools installed, it does support Vuex out of the box. So you can see, like let's give this a refresh, and if I increment this, yeah, you'll see that each of these are tracked. And then you have

thing would be like if you want to increment it, then you have to reference the behavior here, you're going to commit that you want to increment it, and then once again on your store object, you're going to have an increment mutation. So you see what I mean where it's like you end up repeating the same basic stuff in five different places, and it can get, I think, kind of overwhelming in a lot of cases. But I do know there are some things that will help with it. So for example, if we want to access our store from a component, you'll often do things like this with a computed object, where if I want the count, well we have a count computed object, and that just kind of defers to the count property on the Vuex store. So I know there are helpers, we could say import, and what's it called, map, mapState. Let's go back, let's find out together. mapState, yeah, okay. So we import that from Vuex. Yeah, here we go. So if I call map

okay, yeah, and I know why this is. It's because right now we're still storing our Vuex store just on the global object. But what we could do is make it available to every single child component. So I could say let's store here, and then right down here, I could say store like that, or I can just use the object shorthand. So now when I do this, any child component will be able to access the store by saying this.store. So yeah, think about it. Now, any child component we have can access any of this store here, any of the state that it needs to, which means no longer, if you need to access some of that state, are you having to pass down props five levels deep or doing all of this funky stuff? So let's try that again. Refresh. It's still not working though. Cannot read property commit of undefined. So let's take a look at this. Oh yeah, duh, because now it's not window.store. We could say this.store. All right, one more time. Yeah, and now we're getting the

read property commit of undefined. So let's take a look at this. Oh yeah, duh, because now it's not window.store. We could say this.store. All right, one more time. Yeah, and now we're getting the exact same thing as we had before, but this time we're using mapState. So yeah, you can see it's just kind of a helper, so you can alias these things. So you don't always have to say, well, I want a count helper, but that's just going to defer to the count property on the store. And then I'm going to have another thing, and that's going to do the exact same thing. This, just map it, just one-to-one. So when I say within my template, if I want access to count, well, that should map to the count property on our state object, which we can find here. Okay, cool. Now, we can see the exact same thing here as well. So on your components, yeah, like you still need to be able to increment. So you're going to have a method called increment on your counter, but

Now, we can see the exact same thing here as well. So on your components, yeah, like you still need to be able to increment. So you're going to have a method called increment on your counter, but if we want to change the underlying store, well, then we have to reference a mutation. So we have to commit, which I think of sort of like firing an event. We're going to commit that we want to increment, then this will be triggered, and that will update the state itself. We never manually change the state directly. But yeah, we end up in that situation where it's like increment, and then increment. You're just duplicating it over and over. And then if you had another one for decrement, well, yeah, you're going to have the exact same thing again, decrement, commit, decrement. So I think we can do another one. If we switch back for map mutations, is that right? Yeah, so it's basically the exact same thing. Okay, so let's say map state, map mutations,

to be able to save map mutations. So that's what this, and what's this called again? It's object spread rest, what is it? Babel object spread, hmm, rest spread transform. I think this is exactly what we want. But you know what? I don't think this is available, yeah, I don't think this is available in Laravel Mix. So here's how it would work. Let's say you have var things is 1, and then you have otherThings, which would be 2, and you basically want to merge those. A very simple way to do that is through this rest spread operator, or whatever you want to call it. So you could say things. So now you have a new object that still has 1, and you could say things and otherThings. Yeah, and now we've merged them at that point. So we could say let merged, then merged.three. Yeah, you get the basic idea. And that's exactly what we would be doing here. So we have these methods, but I also want these to be kind of merged in to the methods.

then merge dot three. Yeah, you get the basic idea. And that's exactly what we would be doing here. So we have these methods, but I also want these to be kind of merged in to the methods object. Now though, I think, yeah, it's failing, unexpected token. And that's because right now with Laravel Mix, this Babel transformation isn't supported. So why don't we pull that in? This can be a little Laravel Mix exercise for you if you want. So we're going to pull that in here, like so. And then you'll see in your .babelrc file. So yeah, the way it works with Laravel Mix, if you create your own .babelrc, it will merge that with the one that Mix provides out of the box. So take a look at this. We're going to create a new .babelrc file and paste that in. And we're just specifying this is the plugin that we want to use. So now if we come back and give that another run, it should compile because Mix picked up on our .babelrc and merged that in,

And we're just specifying this is the plugin that we want to use. So now if we come back and give that another run, it should compile because Mix picked up on our .babelrc and merged that in, and it's now using this transformation. Okay, so if we come back, give that a refresh. Are we still getting the same thing? Yeah, we are. Okay, so that can be useful for cleaning up some of the clutter, I would say. So again, remember, the benefit is here, like let's imagine you have a different component, other thing. We'll call it Other. And then let's set up a new file within components, other.vue. We'll have our template here. And we'll have our script here. Oh, that's nice. That kind of auto-populates for you. Anyways, export default. And then once again, we'll have computed. So yeah, if any other child component needs access to that count, well, at the beginning of the video, that count was limited,

Anyways, export default. And then once again, we'll have computed. So yeah, if any other child component needs access to that count, well, at the beginning of the video, that count was limited, was exclusive to the Counter. And you would have had to fire some kind of event to share that state. But now, because it's being stored by Vuex, we can access it. So I could say count and then here, we could say this.$store.state.count. And we'll say the count from that other unrelated component is count. Okay, so now we have another, we're just making it available globally, that's fine. But we will reference that down here. And if we come back to Chrome, here we go. And you can see these do sync up. So if we take a look here at our components, yeah, they do match up because they are reading from the same state object. And because we have reactivity, whenever one changes, of course, it's going to filter down to any references. Now, we still have quite a bit.