Introducing Shared State 0:00Let's move on and begin discussing shared state. You'll definitely run into this sooner or later. So imagine that one or more Vue instances or components need access to maybe a user object, something along the lines of this. Okay. So let's give this an element of one to hook into it. Then we're going to duplicate this and we're going to have yet another one. But this will be another component or another instance in your app, and that also needs access to the user object. Okay. So we can see two different sets of data. Building Two Instances 0:26and that also needs access to the user object. Okay. So we can see two different sets of data. They're not in sync. If one changes, it wouldn't affect the other. Clearly, not what we want. But nonetheless, let's see this in action. So I'm going to go to my homepage here. I'm importing Vue through a CDN and we're referencing this file. Okay. So let's create two different divs here. We have one, and I'm just going to spit out the user's name.Okay. So let's create two different divs here. We have one, and I'm just going to spit out the user's name. So we can say user.name. Now, I am still within Laravel here, and Laravel will treat this like a blade statement. So I'm going to prefix it with an at symbol to say, Laravel, leave this alone. This is only for Vue. Now, a quick Laravel tip, actually, you could also use the verbatim directive if you have more things,Now, a quick Laravel tip, actually, you could also use the verbatim directive if you have more things, and that way you wouldn't have to bother with the at symbol. Anyways, so we'll wrap this within an h1, like so, and then we'll duplicate this and do another one for two. So as you can remember, this instance is bound to the top div, and this one is bound to the bottom div. So let's view this in the browser. Okay, and sure enough, we do get two John Doe's. But here's the thing, if we go to our Vue instance, Demonstrating Unsynced Data 1:32Okay, and sure enough, we do get two John Doe's. But here's the thing, if we go to our Vue instance, here's the first and here's the second. Let's go ahead and edit the first. So we can use that VM0 variable that's created for us. We've already talked about that. Anyways, I could say user.name equals changed, and sure enough, it'll update the top instance. But again, because we're not working with shared state here, we have two different pieces of state. Creating a Shared Source 1:53But again, because we're not working with shared state here, we have two different pieces of state. One will not affect the other. So you can imagine how this breaks down for an application. Okay, well, here's the thing to keep in mind. Vue's source of truth is still a simple object. And yes, we can inline it here, but we could just as easily store it out here, like so. So let's imagine this. If we did that, then we could just assign it like so,So let's imagine this. If we did that, then we could just assign it like so, and we could remove a bit of duplication. Now, if we come back to Chrome, give it a refresh, it still works. And again, the benefit is this time, we don't have two unique sources of truth. We have one shared source. So take a look. We have source.So take a look. We have source. Let's just update the user's name to Frank. Run it, and you'll see that both update in real time. And that's because one more time, we have a single source of truth that could be stored within a module that you require. But anyways, it's going to be shared between any number of Vue instances here. Now, you might be thinking, well, Adding a Global Store 2:54between any number of Vue instances here. Now, you might be thinking, well, this instance does have some unrelated data properties in the same here. Well, of course, you could just do something like this. You could use shared, and then assign that. And why don't we even rename this to something like store? This is your global store. Okay, then here, we'll do the exact same thing. Now, this can have Vue is bar,Okay, then here, we'll do the exact same thing. Now, this can have Vue is bar, and this one can have Vue is other bar. And yeah, of course, you can have unique data for each Vue instance, but then still have a location for shared state. So if we were to come back, now we would just have to say shared.user.name. Come back, refresh. That all works.Come back, refresh. That all works. Update the user's name to Sandy, and we're good to go. And by the way, because this is all observed, if we were to update any of these, so let's update the first Vue instance up here. Okay, VM0. Let's go to shared.user.name equals someone else, and that will still work. We'll see that our store.user, Where to Store State 3:57and that will still work. We'll see that our store.user, if we inspect it, will reflect the appropriate name. Okay, so that's about the most basic possible example for sharing state. And like I said, what you could do is store this anywhere you want. You could store it as a global variable. You could store it as a module that you import. And then wherever you need it,You could store it as a module that you import. And then wherever you need it, whether it be a Vue instance or a dedicated component, you can just reference it there, and they will all read and write from the same store.
